浅谈 Redux 之 Action，Reducer，Store 的概念及作用-JavaScript中文网-JavaScript教程资源分享门户

Redux 是一个 JavaScript 应用程序的状态管理库。它可以帮助开发者轻松地管理应用程序的状态，并使其易于测试和调试。Redux 的核心理念包括单一数据源、状态只读，只能通过纯函数更新等。

在 Redux 中，我们需要了解三个重要的概念：Action、Reducer 和 Store。

Action

Action 是描述应用程序中某个事件（例如用户交互）所需的最小数据集合。它是将数据从您的应用程序发送到 Redux store 的有效载荷。在 Redux 中，所有 actions 都必须使用 plain object 形式，并且必须有一个 "type" 属性来指定此操作的类型。其他属性可以是任意数据：

{
  type: 'ADD_TODO',
  text: 'Buy milk'
}

如果 action 对象具有其他属性和值，则建议将与操作名称相关的信息放在 'payload' 对象中，以便稍后在 reducer 中进行处理。

{
  type: 'ADD_TODO',
  payload: {
    id: 1,
    text: 'Buy milk',
    completed: false
  }
}

Reducer

Reducer 是一个更改应用程序状态的函数。根据当前状态和传入的 action，reducer 返回新的应用程序 state。所有 reducers 都以初始 state 为参数开始，并以执行"派发(action)"的方式不断更新 state。

Reducer 必须是一个纯函数，不应更改先前的 state，也不能有副作用（例如 API 调用、路由跳转等）。在 Redux 中，所有 reducer 都应接受两个参数：当前状态(state)和 action。

// javascriptcn.com 代码示例
function todoReducer(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        action.payload
      ]
    case 'TOGGLE_TODO':
      return state.map(todo =>
        todo.id === action.payload.id ? { ...todo, completed: !todo.completed } : todo)
    default:
      return state
  }
}

在上述示例中，reducer 接受 'ADD_TODO' 和 'TOGGLE_TODO' 操作类型，并分别返回新的更新后的 state。如果操作类型未被处理或者不存在，则返回原始 state。

Store

Store 是管理整个 Redux 应用程序状态的容器对象。它将 action 分派到 reducer 并使得包含 actions 和 state 的完整修改历史可查。

使用 Redux 创建 store 相当简单。在创建之前，我们需要导入 rootReducer，这是一个通过将多个 reducer 合并而成的单个 reducer。其中 combineReducers 函数将相应的 reducer 映射到应用程序 state。

import { createStore, combineReducers } from 'redux'
 
const rootReducer = combineReducers({
  todos: todoReducer
})
 
export const store = createStore(rootReducer)

现在我们可以访问 store，并在一些时间点进行“派发(action)”。这会导致所有 reducer 响应最新的 Action 进行恰当的处理，并返回新的应用程序 state。

store.dispatch({ type: 'ADD_TODO', payload: { id: 1, text: 'Buy milk', completed: false } })

总结

在Redux中，Action、Reducer 和 Store 是非常重要的概念。理解这些概念将使您更好地管理您的应用程序状态并进行调试。每个概念都有其重要性和作用区分：

Action 描述了状态更新的意图。
Reducer 执行与 Action 关联的操作来生成新的状态。
Store 管理整个 Redux 应用程序的状态容器对象。

通过组合使用它们来处理复杂应用逻辑，从而提高代码测试性、可维护性等等。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6529eb9f7d4982a6ebc4d5e2