Redux 初探 -- 第三步：设计 reducers-JavaScript中文网-JavaScript教程资源分享门户

在前两篇文章中，我们已经学习了 Redux 的基本概念和使用方法，以及如何设计 actions。在这篇文章中，我们将深入探讨 Redux 的另一个核心概念：reducers。

什么是 reducers

Reducers 是 Redux 中的一个重要概念，用于描述应用程序状态的变化。它们是纯函数，接收当前状态和一个 action，返回一个新的状态。Reducers 的设计原则是不修改任何传入的参数，而是返回一个新的状态对象。

Reducers 的作用是将 action 和当前状态合并成一个新的状态。每个 reducer 都是一个纯函数，它只处理与其相关的部分状态，并返回一个新的状态对象。Redux 中的状态是不可变的，这意味着我们不能直接修改状态，而是要通过 reducer 来修改。

Reducers 的命名通常以其所处理的状态属性名称为前缀，例如 todosReducer 或 visibilityFilterReducer。

如何设计 reducers

Reducers 的设计是 Redux 中的一个重要部分。在设计 reducers 时，我们需要考虑以下几个方面：

1. 初始状态

我们需要定义应用程序的初始状态。这可以是一个对象，也可以是一个数组，具体取决于应用程序的结构和需要。

const initialState = {
  todos: [],
  visibilityFilter: 'SHOW_ALL'
};

2. 处理 actions

Reducers 负责处理 actions，并根据它们返回一个新的状态。我们可以使用 switch 语句来处理不同的 actions。

// javascriptcn.com 代码示例
function todosReducer(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
  }
}

3. 不可变性

Reducers 必须是纯函数，不得修改传入的参数。因此，我们需要使用不可变性来确保返回一个新的状态对象。

// javascriptcn.com 代码示例
function todosReducer(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
  }
}

4. 组合 reducers

在实际应用中，我们通常需要处理多个状态。为了管理这些状态，我们可以将多个 reducers 组合成一个根 reducer。

// javascriptcn.com 代码示例
import { combineReducers } from 'redux'
import todosReducer from './todosReducer'
import visibilityFilterReducer from './visibilityFilterReducer'

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

export default rootReducer

示例代码

下面是一个简单的示例代码，演示如何设计 reducers。

// javascriptcn.com 代码示例
// 初始状态
const initialState = {
  todos: [],
  visibilityFilter: 'SHOW_ALL'
};

// 处理 todos
function todosReducer(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
  }
}

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

// 组合 reducers
import { combineReducers } from 'redux'
const rootReducer = combineReducers({
  todos: todosReducer,
  visibilityFilter: visibilityFilterReducer
})

// 创建 store
import { createStore } from 'redux'
const store = createStore(rootReducer)

// 触发 actions
store.dispatch(addTodo('Learn Redux'))
store.dispatch(toggleTodo(0))
store.dispatch(setVisibilityFilter('SHOW_COMPLETED'))

总结

在 Redux 中，reducers 是一个非常重要的概念。它们负责处理 actions，并根据它们返回一个新的状态。Reducers 必须是纯函数，不得修改传入的参数。在实际应用中，我们通常需要处理多个状态，为了管理这些状态，我们可以将多个 reducers 组合成一个根 reducer。

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