我想弄清楚如何在 redux 中为商店设置初始状态。我使用https://github.com/reactjs/redux/blob/master/examples/todos-with-undo/reducers/index.js作为示例。我试图修改代码，使待办事项有一个初始化的值。
const todoApp = combineReducers({
todos,
visibilityFilter
}, {
todos: [{id:123, text:'hello', completed: false}]
})
按照文档：http : //redux.js.org/docs/api/createStore.html
但它不起作用，我不太确定为什么。
它需要是第二个参数createStore：
const rootReducer = combineReducers({
todos: todos,
visibilityFilter: visibilityFilter
});
const initialState = {
todos: [{id:123, text:'hello', completed: false}]
};
const store = createStore(
rootReducer,
initialState
);
您可以在减速器中设置初始状态。
const initialTodos = [{id:123, text:'hello', completed: false}]
// this is the ES2015 syntax for setting a default value for state in the function parameters
function todoReducer(state = initialTodos, action) {
switch(action.type) {
...
}
return state
}
const todoApp = combineReducers({
// todos now defaults to the array of todos that you wanted and will be updated when you pass a new set of todos to the todoReducer
todos: todoReducer,
visibilityFilter
})
到目前为止已经有了很好的答案，但让我把蛋糕冰镇一下；也许是为了给你一个深入的分析，这样你就不会只是复制有效的 StackOverflow 代码``` 但不知道你的程序为什么会工作。
有两种主要方法可以完成此即： 1. 使用 createStore 方法。它需要一个可选的第二个参数（preloadedState 值）
const store = createStore(counter) // createStore without preloadedState
const initialState = {} // or in your case:
const initialState = {
initialTodos = [{id:123, text:'hello', completed: false}]
}
const store = createStore(counter, initialState) // create store with preloadedState
如果你createStore不使用preloadedState它调用它会初始化state to {}
因此reducers将接收undefined它们的状态值。这将我们带到了第二种方法。
reducers. Reducers也可以initialState通过查看传入的state argument (which would be undefinedifcreateStore没有被调用来设置initialState) 并返回他们想用作默认值的值。const initialState = {} // a common pattern but in your case:
const initialState = {
initialTodos = [{id:123, text:'hello', completed: false}]
}
function todoReducer(state = initialState, action) {
switch (action.type) {
case // your type:
return ...
default:
return state
}
}
方法二的缺点在数据量大的情况下很明显；就像一个巨大的待办事项列表，例如你想作为initialState“应用程序范围”传递。方法 2 会带来很多重复，因为您必须对所有减速器执行相同的操作。这是主要的缺点。但是当您只想将其设置initialState as {}为常见模式时，它非常流行。
为了更好地理解，请阅读 4 分钟：https : //dev.to/lawrence_eagles/how-to-properly-set-initial-state-in-redux-78m
根据@ctrlplusb 的回答，这样做有效的原因是
const rootReducer = combineReducers({
todos: todos,
visibilityFilter: visibilityFilter
});
第一个todos是一个键，它将第二个设置todos为减速器的返回值。Reducers 总是在创建 store 时运行一次。这将初始化您的全局存储。
创建商店时会分派一个操作。这就是在每个组合减速器中提供的初始状态在商店中初始化的方式。如果您检查 redux 开发工具，您会看到发送的第一个操作是“@@redux/INIT{something}”
在 redux 的文档中，在文件末尾附近，有一个 dispatch({ type: ActionTypes.INIT })
看这里https://github.com/reduxjs/redux/blob/master/src/createStore.js#L281-L284
请参阅我在 stackoverflow 上提出的这个问题/答案，以澄清响应： 不同的方式初始化 react redux 存储的初始全局状态？