详解 Redux 中的 action、reducer 以及 store-JavaScript中文网-JavaScript教程资源分享门户

Redux 是一个流行的 JavaScript 库，用于管理应用程序中的状态。它基于 Flux 架构，提供了一种可预测的状态管理方案，使前端开发更加简单、可维护。在 Redux 中，我们主要会涉及到三个概念：action、reducer 和 store。本文将详细介绍这三个概念的作用，以及如何使用它们构建一个完整的 Redux 应用程序。

Action

Action 是 Redux 中的一个对象，用于描述应用程序中发生的事件。它是一个纯 JavaScript 对象，必须包含一个 type 属性，用于指定事件的类型。除了 type 属性之外，Action 对象可以包含任意其他属性，用于传递事件相关的数据。

下面是一个简单的 Action 对象示例：

const addTodo = {
  type: 'ADD_TODO',
  payload: {
    id: 1,
    text: 'Learn Redux',
    completed: false
  }
};

在 Redux 中，我们通过 Action 来描述应用程序中发生的事件。当我们需要改变应用程序中的状态时，我们会创建一个 Action 对象，并将其发送给 Redux。

Reducer

Reducer 是 Redux 中的一个纯函数，用于根据 Action 对象更新应用程序中的状态。它接收两个参数：当前状态和 Action 对象，然后返回一个新的状态。Reducer 函数必须是纯函数，即给定相同的输入，总是产生相同的输出，而且不会修改任何传入的参数。这个特性使得 Redux 中的状态更新更加可预测、可维护。

下面是一个简单的 Reducer 函数示例：

// www.javascriptcn.com code example
const initialState = {
  todos: []
};

function todoReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        todos: [...state.todos, action.payload]
      };
    default:
      return state;
  }
}

在 Redux 中，我们通过 Reducer 函数来更新应用程序中的状态。当我们发送一个 Action 对象时，Redux 会将该对象传递给 Reducer 函数，然后根据该对象更新应用程序中的状态。

Store

Store 是 Redux 中的一个对象，用于存储应用程序的状态。它包含了应用程序中所有的状态，并提供了一些方法来访问和更新这些状态。在 Redux 中，Store 是单一的，即应用程序中只有一个 Store。

下面是一个简单的 Store 对象示例：

import { createStore } from 'redux';
import todoReducer from './reducers/todoReducer';

const store = createStore(todoReducer);

在 Redux 中，我们通过 Store 对象来管理应用程序中的状态。当我们需要访问应用程序中的状态时，我们可以使用 Store 的 getState 方法。当我们需要更新应用程序中的状态时，我们可以使用 Store 的 dispatch 方法发送一个 Action 对象。当我们需要监听应用程序中状态的变化时，我们可以使用 Store 的 subscribe 方法注册一个回调函数。

示例代码

下面是一个完整的 Redux 应用程序示例代码：

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

// Action
const addTodo = {
  type: 'ADD_TODO',
  payload: {
    id: 1,
    text: 'Learn Redux',
    completed: false
  }
};

// Reducer
const initialState = {
  todos: []
};

function todoReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        todos: [...state.todos, action.payload]
      };
    default:
      return state;
  }
}

// Store
const store = createStore(todoReducer);

// Dispatch Action
store.dispatch(addTodo);

// Get State
const state = store.getState();
console.log(state.todos);

在上面的示例代码中，我们首先定义了一个 Action 对象 addTodo，然后定义了一个 Reducer 函数 todoReducer，用于根据 Action 对象更新应用程序中的状态。最后，我们创建了一个 Store 对象 store，并将 todoReducer 作为参数传递给 createStore 方法。然后，我们使用 store.dispatch 方法发送了一个 addTodo Action 对象，最后使用 store.getState 方法获取了更新后的状态。

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

详解 Redux 中的 action、reducer 以及 store

Action

Reducer

Store

示例代码

接着读