javascript - 使用 Redux 在 Store 上创建 initialState

Question

我正在使用来自 https://github.com/caspg/simple-data-table-map 的 repo实现到我现有的应用程序中。但是，在我现有的应用程序中，它包含各种具有自己特定 initialState 的 reducer。在 repo 中，initialState 在 main.js 中

const initialState = {
    regionData: statesData,
    emptyRegions: [],
    sortState: { key: 'regionName', direction: 'ASC' }
};

const store = createStore(rootReducer, initialState);

我在 repo 中分离出 reducer(没有使用 index.js 来组合其中的 3 个)，这样我就可以将它们添加到我现有的代码中。

const reducers = {
    User: require('../reducers/User.js'),
    Alert: require('../reducers/Alert.js'),
    Auth: require('../reducers/Auth.js'),
    Header: require('../reducers/Header.js'),
    PasswordPolicy: require('../reducers/PasswordPolicy.js'),
    AuditTrail: require('../reducers/AuditTrail.js'),
    StoragePolicy: require('../reducers/StoragePolicy.js'),
    DragAndDrop: require('../reducers/DragAndDrop.js'),
    UserProfile: require('../reducers/UserProfile.js'),
    emptyRegions: require('../reducers/map/emptyRegions.js'), //here is it
    regionData: require('../reducers/map/regionData.js'), //here is it
    sortState: require('../reducers/map/sortState.js'), //here is it
    Storage: require('./storage/Storage.js'),
    router: routerStateReducer
};
module.exports = combineReducers(reducers);

我有一个文件来组合所有的 reducer 和它们的每个初始状态(与特定的 reducer 在同一个文件中)

商店/index.js

module.exports = function(initialState) {
const store = redux.createStore(reducers, initialState,

    compose(reduxReactRouter({ createHistory }), window.devToolsExtension ? window.devToolsExtension() : f => f)
)

if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers', () => {
        const nextReducer = require('../reducers')
        store.replaceReducer(nextReducer)
    })
}
return store
}

我试图将 initiateState 放入 sortState.js 但它不起作用。数据不显示。一定是作者的仓库里的东西

const store = createStore(rootReducer, initialState);

将 initialState 设置为应用程序状态。

请赐教。谢谢

Answer 1

如果您使用 combineReducers(...)，每个 Reducer 都需要在第一次运行时返回其初始状态。

const DEFAULT_STATE = { … }
const emptyRegionsReducer = (state = DEFAULT_STATE, action) => {
  switch (action.type) {
    …
    default:
      return state;
  }
}

看看line 60在 redux repo 中。对于对象中的每个 reducer :

const initialState = reducer(undefined, { type: ActionTypes.INIT })

调用 combineReducers() 时立即触发的内容。