React / Redux：我在哪里创建+放置 'master' 应用程序状态？

Question

我开始将 Redux 引入 React 应用程序，但我无法理解我的 'master state design' 的确切使用位置。

对于上下文，我将应用程序状态视为一棵大树，并且我有 reducer 来处理树的一小部分。我对如何表示状态树进行了一些思考，我有一个变量 initialState，它基本上是一个 Immutable.js 对象，带有一堆包含各个部分的子对象我的应用状态。

我已经拆分了我的 reducer 以映射到我的应用程序的这些不同部分，但我无法理解如何创建巨大的主状态树。我知道每个 reducer 都接受整个状态树 + 动作和 returns 基于动作的新状态，但我不明白如果进入的状态 'initial state' 放在哪里减速器是 undefined.

换句话说：如果状态树最初是未定义的，是否应该由一个 reducer 负责创建整个状态树（如果是这样，reducer 应该放在哪里）？或者任何一个 reducer 是否应该将未定义的状态参数分配给 initialState 变量？

Answer 1

如果你使用combineReducers，你不必创建"root."combineReducers返回的函数本身就是一个reducer，它会自动创建root你的状态树的每个 reducer 都有一个 "branch" (属性)。你的 reducer 只需要担心用初始状态初始化它们自己的分支。

如果你不使用 combineReducers，我认为每个 reducer 应该仍然只担心它作用的状态树部分。将其移动到单个 "master" 减速器中会不必要地拆分相关代码，使您的应用程序更难推理。

Answer 2

如 official guide 中的示例所示，您可以为减速器的第一个参数使用默认值，这将是您的初始状态。

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    case ADD_TODO:
      return Object.assign({}, state, {
        todos: [
          ...state.todos,
          {
            text: action.text,
            completed: false
          }
        ]
      })    
    default:
      return state
  }
}

这个初始状态可以是在客户端代码中硬编码的默认值。或者它可以是服务器引导到 HTML 页面的一些数据。例如，在服务器呈现的 EJS 模板中，您可以拥有：

<script>
window.INITIAL_STATE = <%= JSON.stringify(initialState) %>
</script>

React / Redux：我在哪里创建+放置 'master' 应用程序状态？

React / Redux: where do I create + put the 'master' application state?

javascript

reactjs

redux

react-redux