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

Question

我开始将 Redux 引入 React 应用程序，但我无法理解我的“主状态设计”到底在哪里使用。

就上下文而言，我将应用程序状态视为一棵巨大的树，并且我有一些缩减器来处理树的一小部分。我已经考虑了如何表示状态树，并且我有一个变量initialState，它基本上是一个 Immutable.js 对象，其中包含一堆包含我的应用程序状态各个部分的子对象.

我已拆分我的 reducer 以映射到我的应用程序的这些不同部分，但我无法理解如何创建巨大的主状态树。我知道每个减速器都接受整个状态树+动作并根据动作返回一个新状态，但是如果进入减速器的状态是undefined，我不明白在哪里放置“初始状态” .

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

Answer 1

如果您使用的是combineReducers，则不必创建“根”。 combineReducers 返回的函数本身就是一个 reducer，它会自动为你传入的每个 reducer 创建一个带有“分支”（属性）的状态树的根。你的 reducer 只需要担心初始化它们自己的具有初始状态的分支。

如果你不使用combineReducers，我认为每个reducer 仍然应该只关心它所作用的状态树部分。将其移入单个“主”reducer 会不必要地拆分相关代码，使您的应用更难推理。

Answer 2

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

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>