Question

我开始将Redux引入React应用程序，但我无法理解我的主要状态设计的确切位置＆＃39;使用。

对于上下文，我认为应用程序状态是一棵巨树，而且我有缩减器来处理树中的一小部分。我已经对我希望如何表示状态树进行了一些思考，并且我有一个变量initialState，它基本上是一个Immutable.js对象，带有一堆包含各个部分的子对象我的应用状态。

我已将我的缩减器拆分为映射到我的应用程序的这些不同部分，但我无法理解如何创建巨型主状态树。我得到每个reducer接受整个状态树+动作并根据动作返回一个新状态，但我不知道在哪里放置初始状态＆＃39;如果进入减速器的状态是undefined。

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

Answer 1

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

如果你没有使用combineReducers，我认为每个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>

React / Redux：我在哪里创建+放置＆＃39; master＆＃39;申请状态？

2 个答案: