Redux 如何正确地 拆分和组合状态逻辑？

Redux状态拆分

在 Redux 中，我们通常将一个应用的状态拆分成多个子状态，每个子状态对应一个不同的功能模块或领域。这样做的目的是为了使状态更易于管理和维护，并且可以提高代码的可读性和可维护性。

例如，在待办事项应用中，我们可以将状态拆分成如下几个子状态：

• todos: 包含所有待办事项的列表
• visibilityFilter: 当前正在显示的待办事项的过滤条件
• footer: 页脚部分的状态，包括待办事项的统计信息等

使用 combineReducers 组合状态

为了将这些子状态组合成一个完整的状态对象，我们需要使用 Redux 中的 combineReducers API。combineReducers 是一个函数，它接收一个对象作为参数，该对象中的每个键值对代表一个子状态的 reducer 函数，reducer 函数用于处理该子状态的更新。

combineReducers 的返回值是一个新的 reducer 函数，该函数可以用来更新整个状态对象。我们可以在 Redux store 中使用这个 reducer 函数来管理整个应用的状态。

实例：将 TodoList 和 Footer 重构到 Redux

现在，让我们通过一个实例来演示如何使用 combineReducers API 将 TodoList 和 Footer 部分的相关代码重构到 Redux 中。

首先，我们需要定义两个子状态的 reducer 函数：

const todosReducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, action.payload];
    case 'REMOVE_TODO':
      return state.filter(todo => todo.id !== action.payload);
    case 'TOGGLE_TODO':
      return state.map(todo => {
        if (todo.id === action.payload) {
          return {...todo, completed: !todo.completed};
        }
        return todo;
      });
    default:
      return state;
  }
};

const footerReducer = (state = {}, action) => {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return {...state, visibilityFilter: action.payload};
    default:
      return state;
  }
};

然后，我们需要将这两个子状态的 reducer 函数组合成一个新的 reducer 函数：

const rootReducer = combineReducers({
  todos: todosReducer,
  footer: footerReducer
});

最后，我们需要在 Redux store 中使用这个 reducer 函数：

const store = createStore(rootReducer);

现在，我们就成功地将 TodoList 和 Footer 部分的相关代码重构到 Redux 中了。我们可以使用 Redux 的 connect 函数将这些组件与 Redux store 连接起来，这样组件就可以从 Redux store 中获取状态和分发 action。

总结

使用 Redux 的 combineReducers API 可以将一个应用的状态拆分成多个子状态，每个子状态对应一个不同的功能模块或领域。这样做的目的是为了使状态更易于管理和维护，并且可以提高代码的可读性和可维护性。

在本文中，我们通过一个实例演示了如何使用 combineReducers API 将 TodoList 和 Footer 部分的相关代码重构到 Redux 中。我们首先定义了两个子状态的 reducer 函数，然后将这两个子状态的 reducer 函数组合成一个新的 reducer 函数，最后在 Redux store 中使用了这个 reducer 函数。