使用combineReducers合并多个reducer（基础文章）

2024-02-06 14:41:18

combineReducers旨在解决什么问题？

在Redux中，reducer函数是用来更新应用程序状态的。每个reducer负责更新应用程序状态的一部分。例如，一个应用程序可能有一个reducer负责更新用户列表，另一个reducer负责更新当前选中的用户。

当应用程序变得复杂时，您可能需要使用多个reducer来管理应用程序的状态。但是，如果每个reducer都独立工作，那么很难保持应用程序状态的一致性。

为了解决这个问题，Redux提供了一个名为combineReducers的函数。combineReducers可以将多个reducer组合成一个单一的reducer，从而可以更轻松地管理应用程序的状态。

combineReducers的用法

combineReducers函数接受一个对象作为参数，该对象的键是reducer的名称，值是reducer函数本身。例如，下面的代码将两个reducer组合成了一个单一的reducer：

import { combineReducers } from 'redux';

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);
    default:
      return state;
  }
};

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

const rootReducer = combineReducers({
  todos: todosReducer,
  visibilityFilter: visibilityFilterReducer
});

上面的代码将两个reducer（todosReducer和visibilityFilterReducer）组合成了一个名为rootReducer的reducer。rootReducer可以用来更新应用程序的整个状态。

combineReducers的原理

combineReducers函数的原理很简单。它遍历对象中的每个键值对，并将reducer函数应用于该键值对的值。然后，它将结果存储在一个新的对象中，该对象中的键是reducer的名称，值是reducer函数更新后的状态。

例如，下面的代码显示了combineReducers函数如何将两个reducer组合成一个单一的reducer：

const rootReducer = combineReducers({
  todos: todosReducer,
  visibilityFilter: visibilityFilterReducer
});

const state = rootReducer({
  todos: [
    { id: 1, text: 'Learn Redux', completed: false },
    { id: 2, text: 'Build a Redux app', completed: true }
  ],
  visibilityFilter: 'SHOW_ALL'
});

console.log(state);

上面的代码将两个reducer（todosReducer和visibilityFilterReducer）组合成了一个名为rootReducer的reducer。然后，它将rootReducer应用于应用程序的初始状态，并将结果存储在state变量中。

console.log(state)语句将state变量的值打印到控制台。输出如下：

{
  todos: [
    { id: 1, text: 'Learn Redux', completed: false },
    { id: 2, text: 'Build a Redux app', completed: true }
  ],
  visibilityFilter: 'SHOW_ALL'
}