使用Redux在商店中创建初始状态

我正在使用从https://github.com/caspg/simple-data-table-map的回购实现到我现有的应用程序中。但是，在我现有的应用程序中，它包含各种具有自己特定的initialState的reducer。在回购中，初始化状态在main.js使用Redux在商店中创建初始状态

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

const store = createStore(rootReducer, initialState);

我分离出的回购减速机（不使用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);

我有一个文件，所有的减速相结合，他们的每一个参数initialstate的（它与特定的减速机相同的文件）

店/ 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设置为应用程序状态。

请赐教。谢谢

来源

2017-07-19 Mervyn Lee

“我有一个文件，所有的减速相结合，他们的每一个参数initialstate的” - 你能提供你结合初始状态的代码？ – cathalkilleen

@cathalkilleen例如，我有一个名为user.js的一个减速文件， VAR的初始化状态= { user_credential：{ 用户名：空，用户名：空， isVerified：假的，电子邮件：空 } }; module.exports =（状态=初始化状态，动作= ''）=> { 开关（action.type）{ 情况下 'GET_USER'： ......所以initiateState被送入module.exports =（state = initialState ...）我在sortState.js中尝试过，但它不起作用 –

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

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

看看line 60在redux回购。对于物体中的每个减速器：

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

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

来源

2017-07-19 08:58:59 philipp

在regionData.js中，module.exports =（state = []，action）=> {switch.type（）{ case EDIT_ROW： ...，我如何分配state = initialState，因为它是一个空数组。 –

但是不应该将'module.exports =（state = statesData，action）'分配给上面预加载的状态吗？ – philipp

Thanksssssssssssssssss !!!!我的不好，它终于解决了！ –

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

你可以把它当作一个可选第二个参数到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在第一次初始化时在该减速器中给出值0。 counter减速机初始化后，state值将变成任何counter在Redux存储区中。一个重要的事情要注意的是，你必须包括行default: return state;这种方法的工作。

在你的情况，它看起来像你使用两种方法。如果你很高兴与您在减速器内设置初始化状态，那么你应该从createStore删除initialState说法：

const store = createStore(rootReducer);

来源

2017-07-19 09:25:14 cathalkilleen

谢谢。我最终设置个别reducer启动状态。 –

使用Redux在商店中创建初始状态

回答

相关问题