初始化react redux商店的初始全球状态的不同方式？

Posted 2021-03-27

初始化react redux商店的初始全球状态有哪些不同的方法？我看到这个redux可以设置初始全局状态的两种方式

假设我们有一个reducer，所有的javascript都在一个文件中。

function rootReducer(state = "Initial Reducer State!", action){
  switch(action.type) {
    case SET_TEXT:
      return "Ignore this case statement it won't run"
    default:
      return state;
  }
}

（1）我知道你可以使用像createStore(rootReducer, initialState)这样的东西。

const store = createStore(
  rootReducer,
  initialState
)

const initialState = {
  text: "Initial Global State!"
}

（2）但是，我注意到一些repos将initialState设置为空白对象，但redux存储显示已填充全局状态。此stackoverflow帖子的示例：how to set initial state in redux

const store = createStore(
  combineReducers({
     text: rootReducer
  }),
  initialState
)

const initialState ={}

结果全球商店：

（1）输出{text: "Initial Global State!"}

（2）输出{text: "Initial Reducer State!"}

为什么＃2按照它的方式工作？

它何时何地被设定？

答案

[答案来自于我玩redux并获得高级反应 - 减少开发者Andrew Dushane的建议]

通过redux创建商店时，每个reducer会自动触发一次

创建商店时会调度一个操作。这就是每个组合减速器中提供的初始状态在商店中初始化的方式。如果你检查redux dev工具，你会看到调度的第一个动作是"@@redux/INIT{something}"

在redux的文档中，靠近文件的末尾，有一个dispatch({ type: ActionTypes.INIT })

看到这里https://github.com/reduxjs/redux/blob/master/src/createStore.js#L281-L284

TLDR

因为在例子＃2中，

• 商店已创建
• combineReducers({text: rootReducer})得到了设定
• rootReducer运行，因为每个reducer在创建商店时运行一次
• 生成默认返回值，在本例中为"Initial Reducer state!"
• 在text的({text: rootReducer}）捕获回应
• {text: "Initial Reducer State!"}被存储为全局状态

最后的笔记

如果你要在商店设置一个initialState，这总是在所有减速器被调度一次后运行。