使用 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
}

我尝试将initialState 放入sortState.js，但它不起作用。 数据不显示。一定是作者repo里的东西

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 存储库中的 line 60。对于对象中的每个reducer：

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

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

Answer 2

在 Redux 中有两种初始化状态的方法 - docs explain the details very well。

您可以通过将 global initialState 作为可选的 第二个参数 传递给 createStore 函数来设置它，如下所示：

const initialState = { /*..initial state props..*/ }    
const store = createStore(rootReducer, initialState);

或者，您可以通过以下方式（来自官方文档）为单个减速器设置初始状态：

function counter(state = 0, action) {
    switch (action.type) {
        case 'INCREMENT': return state + 1;
        case 'DECREMENT': return state - 1;
        default: return state;
    }
}

传递state = 0 意味着state 在第一次初始化时在该reducer 中被赋予值0。在counter reducer 初始化后，state 的值变成了 Redux 存储中的任何 counter。需要注意的重要一点是，您必须包含 default: return state; 行才能使此方法起作用。

在您的情况下，您似乎正在使用两种方法。如果您对在 reducer 中设置的 initialState 感到满意，那么您应该从 createStore 中删除 initialState 参数：

const store = createStore(rootReducer);