Redux 中如何处理多个 action

在 Redux 中，一个 action 是一个描述一个动作的普通对象。当然，如果您只需要处理一个 action，那只需要使用一个 reducer 就可以了。但在大型应用程序中，有可能需要处理多个 action，那么如何进行处理呢？

reducer

在 Redux 中，reducer 是处理 action 的函数。在处理一个 action 时，reducer 将接收当前 state 和一个 action 对象作为参数，并通过返回一个新的 state 来描述 action 的结果。

示例代码：

// www.javascriptcn.com code example
// 一个简单的 reducer
function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

如果希望处理多个 action，可以使用 switch 语句来检测 action 的 type。当然，这样的代码看起来很冗长，而且可能需要在多个 reducer 中重复编写，而且还容易出错，随着变得越来越复杂时，维护也会非常困难。

Redux 中的多个 reducer

为了解决这样的问题，Redux 提供了 combineReducers 函数来将多个 reducer 合并为一个单独的 reducer。

示例代码：

// www.javascriptcn.com code example
import { combineReducers } from 'redux'

// 多个 reducer
function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          id: action.id,
          text: action.text,
          completed: false
        }
      ]
    case 'TOGGLE_TODO':
      return state.map(todo =>
        todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
      )
    default:
      return state
  }
}

function visibilityFilter(state = 'SHOW_ALL', action) {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter
    default:
      return state
  }
}

// 合并多个 reducer
const todoApp = combineReducers({
  todos,
  visibilityFilter
})

export default todoApp

在这个示例中，我们定义了两个 reducer，一个是 todos，一个是 visibilityFilter，并使用 combineReducers 函数将它们合并到一个新的 reducer 中。combineReducers 函数接收一个对象，其中包含多个 reducer，每个 reducer 根据其 key 和 value 来处理 state 的一部分。在上面的例子中，我们使用 todos 来管理数组 state，并用 visibilityFilter 来管理字符串 state。当我们处理一个 action 时，Redux 会调用每个 reducer，并返回一个包含每个 reducer 的新 state 的汇集。

指导意义

在实际开发中，我们通常需要处理多个 action，有时需要使用多个 reducer，有时不需要。当然，在处理多个 action 时，使用 combineReducers 函数是一种简单有效的方法。

在 Redux 中，操作数据不会去直接修改 state，而是返回一个新的 state，这种方式使得我们可以轻松地追踪和记录所有操作，便于调试和维护。

希望本文对您理解 Redux 中如何处理多个 action 提供帮助，如果有任何问题，欢迎在评论区留言。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6785066f9137010942f9ad1a