详解 Redux 中的 "Action Creators" 和 "Reducers"

在 Redux 中，"Action Creators" 和 "Reducers" 是两个非常重要的概念。本文将会详细介绍它们的含义、使用场景以及如何正确地使用。

什么是 "Action Creators"

在 Redux 中，"Action Creators" 用来创建 Action。Action 是一个简单的对象，它有一个 "type" 字段和一些 "payload" 数据。"Action Creators" 用来生成这些 Action 对象。

下面是一个 "Action Creators" 的示例：

const ADD_TODO = "ADD_TODO";

function addTodoAction(todo) {
  return {
    type: ADD_TODO,
    payload: todo,
  };
}

上面的代码中，我们定义了一个 "ADD_TODO" 的常量作为 Action 的类型，然后定义了一个 "addTodoAction" 的函数来生成一个包含 "ADD_TODO" 类型和数据的 Action 对象。

什么是 "Reducers"

在 Redux 中，"Reducers" 用来更新 State。Reducer 是一个纯函数，它接收当前的 State 和一个 Action 作为参数，并返回一个新的 State。Reducer 不能改变原有的 State，它应该始终返回一个新的 State 对象。

下面是一个简单的 "Reducers" 的示例：

const ADD_TODO = "ADD_TODO";

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

上面的代码中，我们定义了一个初始的 State，即一个空数组。然后定义了一个 "todosReducer" 的函数来处理 Action。当收到一个 "ADD_TODO" 的 Action 时，Reducer 会将新的 todo 添加到原来的 State 中并返回一个新的 State 对象。

使用示例

下面是一个简单的使用示例：

import { createStore } from "redux";

// 定义 Action Types
const ADD_TODO = "ADD_TODO";

// 定义 Action Creators
function addTodoAction(todo) {
  return {
    type: ADD_TODO,
    payload: todo,
  };
}

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

// 创建 Store
const store = createStore(todosReducer);

// 发起 Action
store.dispatch(addTodoAction("Buy Milk"));

// 获取 State
const state = store.getState();

console.log(state); // ["Buy Milk"]

上面的代码中，我们首先使用 Redux 的 "createStore" 函数创建了一个 Store 对象，并将 "todosReducer" 函数作为参数传入。然后我们使用 "addTodoAction" 函数创建了一个包含 "ADD_TODO" 类型的 Action 对象并发起了一个 Action。

最后，我们使用 "store.getState()" 函数获取当前的 State，并将其打印出来。可以看到，我们成功地将 "Buy Milk" 添加到了 State 中。

总结

"Action Creators" 和 "Reducers" 是 Redux 中两个非常重要的概念。使用 "Action Creators" 可以生成 Action 对象，使用 "Reducers" 可以更新 State。在实际开发中，使用 Redux 可以帮助我们更好地管理应用的 State，提高开发效率和应用质量。

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