如何在 reducer 中将对象推送到数组中

在 Redux 应用程序中，reducer 负责根据 action 对传递给它的当前状态进行更改。在有些情况下，我们需要将一个对象推送到数组中，以便在状态中存储多个对象。本篇文章将指导程序员如何在 reducer 中将对象推送到数组中。

简单的 Redux reducer

在介绍如何将对象推送到数组之前，我们需要了解一个基本的 Redux reducer 函数。以下是一个简单的 reducer 函数：

const initialState = {
  value: 0
};

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case "INCREMENT":
      return { ...state, value: state.value + 1 };
    case "DECREMENT":
      return { ...state, value: state.value - 1 };
    default:
      return state;
  }
}

这个 reducer 函数被称为 counterReducer，它负责管理一个简单的计数器应用程序。当匹配的 action 类型为 "INCREMENT" 时，它将增加当前状态中的值，当匹配的 action 类型为 "DECREMENT" 时，它将减少当前状态中的值。如果 action 类型未匹配到，它将返回当前状态。

将对象推送到数组中

现在让我们看一下如何将对象推送到数组中。假设我们正在开发一个待办事项应用程序，并且希望在完成标记和任务名称等详细信息中存储每个任务。我们可以定义以下数据结构：

const initialState = {
  todos: []
};

function todoReducer(state = initialState, action) {
  switch (action.type) {
    case "ADD_TODO":
      return {
        ...state,
        todos: [
          ...state.todos,
          {
            id: action.id,
            text: action.text,
            completed: false
          }
        ]
      };
    default:
      return state;
  }
}

如上所述，当 action 类型为 "ADD_TODO" 时，我们将创建一个包含新任务详细信息的对象，并将它推送到 todos 数组中。

以下是我们可以使用的 action 创建函数：

let nextTodoId = 0;

function addTodo(text) {
  return {
    type: "ADD_TODO",
    id: nextTodoId++,
    text
  };
}

在这个示例中，我们使用一个全局变量 nextTodoId 来为每一个新任务生成一个唯一的 ID。

总结

Redux 应用程序的 reducer 函数是一个非常有用的工具，可以让我们管理应用程序的状态。在某些情况下，我们可能需要将对象推送到数组中以跟踪多个项。通过遵循本文所述的示例，您现在可以更好地理解如何在 reducer 中实现此目的。