映射导入状态到导入化合器的问题;在preloadedState参数中发现意外的键传递给createStore

时间:2019-12-15 21:16:56

标签: reactjs redux redux-persist redux-store

我正在尝试在redux中分解我的reducer,我觉得这样做正确;但是redux仍然抱怨:

Unexpected keys "modalActive", "isLoggedIn" found in preloadedState argument passed to createStore. Expected to find one of the known reducer keys instead: "ui", "users". Unexpected keys will be ignored.

我的想法是从每个州的相应类别中导入:

/* imported initialStates */
import { usersStartState } from './reducers/users/index' // state for users
import { uiStartState } from './reducers/ui/index' // state for ui concerns

这些是导入状态的样子:

/*./reducers/users/index */
export const usersStartState = { isLoggedIn: false}


/*./reducers/ui/index */
export const uiStartState = { modalActive: false }

然后回到我的store文件,导入reducers:

/* imported reducers */
import ui from './reducers/ui/index' //reducer for ui
import users from './reducers/users/index' //reducer for users

import { applyMiddleware, combineReducers, createStore } from 'redux'

var rootReducer = combineReducers({ // use combineReducers function from redux to well, combine my reducers!!
 ui,
 users
})

然后从两个状态对象中为初始状态创建一个新对象...

var startState = Object.assign({}, uiStartState, usersStartState)

然后像这样使用:

   let store;
    const isClient = typeof window !== 'undefined';
    if (isClient) {
        const { persistReducer } = require('redux-persist');
        const storage = require('redux-persist/lib/storage').default;
        const persistConfig = {
            key: 'primary',
            storage,
            whitelist: ['isLoggedIn', 'modalActive'], // place to select which state you want to persist

        }
        store = createStore(
            persistReducer(persistConfig, rootReducer),
            startState,
            composeWithDevTools(applyMiddleware(
                thunkMiddleware,
                createLogger({ collapsed: false })
            ))
        );
        store.__PERSISTOR = persistStore(store);
    } else {
        store = createStore(
            rootReducer,
            startState,
            composeWithDevTools(applyMiddleware(
                thunkMiddleware,
                createLogger({ collapsed: false })
            ))
        );
    }
    return store;

但是我仍然遇到错误!

这是商店的总文件:

import { applyMiddleware, combineReducers, createStore } from 'redux'

/* imported initialStates */
import { usersStartState } from './reducers/users/index'
import { uiStartState } from './reducers/ui/index'

/* imported reducers */
import ui from './reducers/ui/index'
import users from './reducers/users/index'

import { composeWithDevTools } from 'redux-devtools-extension'
import { persistStore } from 'redux-persist';

import { createLogger } from 'redux-logger'
import thunkMiddleware from 'redux-thunk'

var rootReducer = combineReducers({
 ui,
 users
})

var startState = Object.assign({}, uiStartState, usersStartState)
console.log('startState', startState)

export default () => {
    let store;
    const isClient = typeof window !== 'undefined';
    if (isClient) {
        const { persistReducer } = require('redux-persist');
        const storage = require('redux-persist/lib/storage').default;
        const persistConfig = {
            key: 'primary',
            storage,
            whitelist: ['isLoggedIn', 'modalActive'], // place to select which state you want to persist

        }
        store = createStore(
            persistReducer(persistConfig, rootReducer),
            startState,
            composeWithDevTools(applyMiddleware(
                thunkMiddleware,
                createLogger({ collapsed: false })
            ))
        );
        store.__PERSISTOR = persistStore(store);
    } else {
        store = createStore(
            rootReducer,
            startState,
            composeWithDevTools(applyMiddleware(
                thunkMiddleware,
                createLogger({ collapsed: false })
            ))
        );
    }
    return store;
};

但是我在开发工具中注意到,我的状态看起来像这样:

enter image description here

所以我会错误地组合我的状态,例如再次:

var startState = Object.assign({},uiStartState,usersStartState)

感谢您的帮助!

0 个答案:

没有答案