我正在尝试在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;
};
但是我在开发工具中注意到,我的状态看起来像这样:
所以我会错误地组合我的状态,例如再次:
var startState = Object.assign({},uiStartState,usersStartState)
感谢您的帮助!