使用 Redux 在 Store 上创建 initialState

Question

我正在使用来自https://github.com/caspg/simple-data-table-map 的repo来实现我现有的应用程序。但是，在我现有的应用程序中，它包含具有自己特定初始状态的各种减速器。在 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);

我有一个文件来组合所有减速器和它们的每个初始状态（与特定减速器在同一个文件中）

商店/ 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
}

我试图将启动状态放入 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;
  }
}

查看redux repo 中的第 60 行。对于对象中的每个减速器：

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

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