Question

初始化React Redux存储的初始全局状态有哪些不同的方法？我看到了这种还原可以设置初始全局状态的两种方式

假设我们只有一个化简器，并且所有的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）但是，我注意到一些存储库将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的工作方式如此？

何时何地设置？

Answer 1

[答案来自我，与redux一起玩，并从高级react-redux开发人员Andrew Dushane那里获得建议]

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

创建商店时会调度一个动作。这就是每个合并的reducer中提供的初始状态如何在商店中初始化的方式。如果您检查redux dev tools，您将看到调度的第一个操作是"@@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，则该操作总是在所有reducer一次调度后运行。

初始化React Redux存储的初始全局状态的不同方式？

1 个答案:

TLDR

最后的笔记