初始化 react redux store 的初始全局状态的不同方法?

IT技术 javascript reactjs redux react-redux store
2021-05-21 07:58:43

初始化 react redux store 的初始全局状态有哪些不同的方法?我看到这个 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)但是,我注意到一些 repos 将 an 设置initialState为空白对象,但 redux 存储显示已填充全局状态。此stackoverflow帖子中的示例:如何在redux中设置初始状态

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

const initialState ={}

结果全球商店:

(1)输出{text: "Initial Global State!"}

(2)输出{text: "Initial Reducer State!"}

为什么#2 的工作方式如此?

何时何地设置?

1个回答

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

当通过 redux 创建 store 时,每个 reducer 都会自动触发一次

创建商店时会分派一个操作。这就是在每个组合减速器中提供的初始状态在商店中初始化的方式。如果您检查 redux 开发工具,您将看到调度的第一个操作是"@@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 在创建 store 时运行一次
  • 默认返回值,在这种情况下 "Initial Reducer state!"
  • text({text: rootReducer}) 中捕获响应
  • {text: "Initial Reducer State!"} 被存储为全局状态

最后的笔记

如果您要initialState在 store 上设置一个,这总是在所有 reducer 被调度一次后运行。