鍍金池/ 問答/HTML/ redux-persist合并reducer時報錯

redux-persist合并reducer時報錯

問題描述

報錯信息:

Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

我將不同功能的reducer放到不同的文件夾下,然后使用redux-persist進(jìn)行數(shù)據(jù)持久化處理,web項目會經(jīng)常刷新么,所以想讓store中的數(shù)據(jù)不丟失,然而合并reducer應(yīng)用combineReducers方法是報錯,不知道為什么

相關(guān)代碼

// 請把代碼文本粘貼到下方(請勿用圖片代替代碼)
reducer

import * as Pages from './action-types';

let defaultValue = {
    user_name: "",
    user_id: ""
}

export default function UserInfo (state = defaultValue, action = {}) {
    switch (action.type) {
        case Pages.SAVEUSERINFO:
            return { ...state,
                ...{
                    user_name: action.data.data.username,
                    user_id: action.data.data.id
                }
            };
        default:
            return state;
    }
}

合并位置

import {
    combineReducers,
} from 'redux';
import UserInfo from './Pages/reducers';
import SaveInfo from './Layout/reducers';


const rootReducer = combineReducers({ 
    UserInfo,
    SaveInfo
});

export default rootReducer;

入口文件

import {
    Provider
} from 'react-redux';
import {
    createStore,
    applyMiddleware
} from 'redux';
// 這個Reducers就是我合并的reducer
import Reducers from '@/Reducers';
import thunk from 'redux-thunk';
import {persistStore, persistCombineReducers} from 'redux-persist';
import { PersistGate } from 'redux-persist/es/integration/react';

import storage from 'redux-persist/es/storage'
const config = {
    key: 'root',
    storage,
};

function configureStore(){
    console.log(Reducers)
    let reducer = persistCombineReducers(config, Reducers);
    let store = createStore(reducer, applyMiddleware(thunk));
    let persistor = persistStore(store);
    return { persistor, store }
}
const render = Component => {
    const { persistor, store } = configureStore();
    ReactDOM.render(
        //綁定redux、熱加載
        <Provider store={store}>
            <PersistGate persistor={persistor}>
                <Component />
            </PersistGate>
        </Provider>,
        document.getElementById('app'),
    )
}

你期待的結(jié)果是什么?實際看到的錯誤信息又是什么?

期待無論怎么刷新瀏覽器,刷新之前的store中的數(shù)據(jù)能保存到刷新之后來

回答
編輯回答
下墜

persistCombineReducers這個方法不知道是我用的不對還是被官方廢棄了,看文檔使用persistReducer方法來合并config和reducer即可完成實現(xiàn)

import { persistStore, persistReducer } from 'redux-persist';
const persistedReducer = persistReducer(persistConfig, Reducers)
function configureStore(){
    let store = createStore(persistedReducer, applyMiddleware(thunk));
    let persistor = persistStore(store);
    return { persistor, store }
}
const render = Component => {
    const { persistor, store } = configureStore();
    ReactDOM.render(
        //綁定redux、熱加載
        <Provider store={store}>
            <PersistGate persistor={persistor}>
                <Component />
            </PersistGate>
        </Provider>,
        document.getElementById('app'),
    )
}

哪位大神如果有具體的問題原因也煩請告知一下,感激不盡

2018年2月19日 02:59