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

问题描述 投票:0回答:1

初始化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按照它的方式工作?

它何时何地被设定?

javascript reactjs redux react-redux store
1个回答
0
投票

[答案来自于我玩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,这总是在所有减速器被调度一次后运行。

© www.soinside.com 2019 - 2024. All rights reserved.