写给所有 Redux 新手：详解 Redux 相关概念-JavaScript中文网-JavaScript教程资源分享门户

前言

Redux 是一个非常流行的 JavaScript 状态管理库，它可以帮助我们更好地管理应用程序中的状态。但是对于初学者来说，Redux 的概念可能会让人感到困惑。本篇文章将详细讲解 Redux 中的相关概念，帮助新手更好地理解 Redux。

Redux 的核心概念

Store

Store 是 Redux 的核心概念之一，它是应用程序中保存状态的容器。在 Redux 中，所有的状态都存储在一个单一的对象中，这个对象被称为 Store。我们可以通过 Redux 提供的 API 来访问 Store 中的状态。

Action

Action 是一个简单的 JavaScript 对象，用于描述应用程序中发生的事件。Action 中必须包含一个 type 属性，用于描述事件的类型。除 type 属性外，Action 中可以包含任意其他属性，用于描述事件的具体内容。

下面是一个 Action 的示例代码：

{
  type: 'ADD_TODO',
  payload: {
    id: 1,
    text: 'Learn Redux'
  }
}

Reducer

Reducer 是 Redux 中的另一个核心概念，它是一个纯函数，用于处理 Action，更新 Store 中的状态。Reducer 接收两个参数：当前状态和 Action，然后根据 Action 的类型更新状态并返回新的状态。

下面是一个 Reducer 的示例代码：

// javascriptcn.com 代码示例
function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        action.payload
      ]
    default:
      return state
  }
}

在上面的示例代码中，我们定义了一个名为 todos 的 Reducer，它接收两个参数 state 和 action。当 action 的类型为 ADD_TODO 时，Reducer 会将 action.payload 添加到当前状态中并返回新的状态。

Dispatch

Dispatch 是一个函数，用于将 Action 发送给 Reducer，并更新 Store 中的状态。我们可以通过调用 Redux 提供的 API 来调度 Action。

下面是一个 Dispatch 的示例代码：

store.dispatch({
  type: 'ADD_TODO',
  payload: {
    id: 1,
    text: 'Learn Redux'
  }
})

在上面的示例代码中，我们调用了 Store 的 dispatch 方法，并传递了一个 Action 对象。Redux 会自动将这个 Action 发送给 Reducer，并更新 Store 中的状态。

Redux 的工作流程

Redux 的工作流程可以简单地概括为以下几个步骤：

应用程序中的某个部分发出 Action。
Store 接收到 Action，并将它发送给 Reducer。
Reducer 处理 Action，更新 Store 中的状态。
Store 中的状态发生变化，通知应用程序中的其他部分。
应用程序中的其他部分重新渲染，并显示新的状态。

Redux 的示例代码

下面是一个简单的 Todo List 应用程序的示例代码，它演示了 Redux 的使用方法。

// javascriptcn.com 代码示例
import { createStore } from 'redux'

// 定义 Action 的类型
const ADD_TODO = 'ADD_TODO'

// 定义 Action 的创建函数
function addTodoAction(text) {
  return {
    type: ADD_TODO,
    payload: {
      id: Date.now(),
      text
    }
  }
}

// 定义 Reducer
function todos(state = [], action) {
  switch (action.type) {
    case ADD_TODO:
      return [
        ...state,
        action.payload
      ]
    default:
      return state
  }
}

// 创建 Store
const store = createStore(todos)

// 订阅 Store 中的状态变化
store.subscribe(() => {
  console.log(store.getState())
})

// 发送 Action
store.dispatch(addTodoAction('Learn Redux'))

在上面的示例代码中，我们首先定义了一个 ADD_TODO 的 Action 类型和一个 addTodoAction 的 Action 创建函数。然后我们定义了一个 todos 的 Reducer，它处理 ADD_TODO 类型的 Action，并更新 Store 中的状态。接着我们创建了一个 Store，并订阅了它的状态变化。最后我们发送了一个 ADD_TODO 类型的 Action，Redux 会自动将它发送给 Reducer，并更新 Store 中的状态。

总结

Redux 是一个非常流行的 JavaScript 状态管理库，它可以帮助我们更好地管理应用程序中的状态。在本篇文章中，我们详细讲解了 Redux 中的相关概念，包括 Store、Action、Reducer 和 Dispatch，并演示了 Redux 的使用方法。希望这篇文章能够帮助新手更好地理解 Redux，从而更加熟练地使用它。

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