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);

我有一个文件来组合所有reducers和它们的每个初始状态（与特定的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;
  }
}

请查看redux repo中的line 60。对于对象中的每个reducer：

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

调用combineReducers()时会立即触发什么。

Answer 2

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

您可以通过将全局初始状态作为可选第二个参数传递给createStore函数来设置全局初始状态，如下所示：

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

或者，您可以通过以下方式（来自官方文档）为个人缩减器设置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;才能使用此方法。

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

const store = createStore(rootReducer);

使用Redux在Store上创建initialState

2 个答案: