Redux 常见问题解决：Actions 必须是纯对象-JavaScript中文网-JavaScript教程资源分享门户

在 Redux 中，Actions 是一个重要的概念，用于描述应用程序中发生的事件。Actions 描述了事件的类型和相关数据，它们被发送到 Redux Store 中，从而触发应用程序状态的更新。然而，在使用 Redux 开发应用程序时，你可能遇到了一个常见的问题：Actions 必须是纯对象。那么，什么是纯对象，为什么 Actions 必须是纯对象，如何解决这个问题呢？本文将详细介绍这些问题，并提供示例代码和指导意义，帮助你更好地理解和应用 Redux。

什么是纯对象？

在 JavaScript 中，对象是一种复杂的数据类型，它可以包含多个属性和方法。然而，在 Redux 中，Actions 必须是纯对象，这意味着它们只能包含简单的属性和值，而不能包含方法或其他复杂的数据类型。纯对象是指只包含若干个键值对的普通对象，它们没有原型链，也没有方法和属性。例如：

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

这个对象就是一个纯对象，它只包含 type 和 payload 两个属性，而 payload 是一个包含 id、text 和 completed 三个属性的纯对象。它们都只包含简单的数据类型，没有方法和属性。

为什么 Actions 必须是纯对象？

Redux 的设计思想是简单和可预测性，它通过限制状态的修改方式和提供统一的状态管理机制，来确保应用程序状态的可预测性和可维护性。在 Redux 中，所有的状态变化都是通过发送 Actions 来触发的，然后由 Redux Store 根据 Action 的类型和数据来更新应用程序状态。为了确保这个过程的可预测性和可维护性，Redux 要求 Actions 必须是纯对象，这样可以确保所有的状态变化都是通过纯函数（Reducer）来处理的，从而避免了副作用和不可预测的状态变化。

如果 Actions 不是纯对象，可能会导致以下问题：

不可预测性：如果 Action 包含复杂的数据类型或方法，可能会导致状态变化不可预测，从而使应用程序状态变得不稳定和难以维护。
不可序列化：如果 Action 包含不可序列化的数据类型（如函数、Symbol 等），则无法将其保存到本地存储或通过网络传输，从而使应用程序状态无法恢复和共享。
不可测试性：如果 Action 包含复杂的数据类型或方法，可能会导致测试难度增加，从而使开发人员难以编写可靠的测试用例。

因此，为了确保应用程序状态的可预测性、可维护性和可测试性，Redux 要求 Actions 必须是纯对象。

如何解决 Actions 必须是纯对象的问题？

如果你遇到了 Actions 不是纯对象的问题，可以尝试以下解决方案：

使用 Action Creator：Action Creator 是一个函数，用于创建 Action 对象。它可以将复杂的数据类型和方法封装在函数内部，然后返回一个纯对象。例如：

// www.javascriptcn.com code example
function addTodo(id, text) {
  return {
    type: 'ADD_TODO',
    payload: {
      id,
      text,
      completed: false
    }
  };
}

这个函数将 id 和 text 作为参数，然后返回一个包含 id、text 和 completed 三个属性的纯对象。这样可以避免直接创建复杂的 Action 对象，从而确保 Actions 必须是纯对象。

使用中间件：Redux 提供了中间件机制，可以在发送 Action 到 Reducer 之前或之后执行一些额外的操作，例如异步操作、日志记录、错误处理等。中间件可以拦截 Action 对象，并对其进行修改或转换，从而使其成为纯对象。例如，redux-thunk 中间件可以让 Action Creator 返回一个函数，而不是一个纯对象：

// www.javascriptcn.com code example
function addTodoAsync(text) {
  return (dispatch) => {
    setTimeout(() => {
      dispatch(addTodo({
        id: Date.now(),
        text,
        completed: false
      }));
    }, 1000);
  };
}

这个函数返回一个函数，这个函数接受一个 dispatch 函数作为参数，然后在 1 秒后调用 dispatch 函数，发送一个包含 id、text 和 completed 三个属性的纯对象。使用中间件可以灵活地处理 Actions，从而避免了不必要的复杂性和副作用。

遵循 Redux 设计原则：最重要的是，遵循 Redux 的设计原则，尽可能使用纯对象作为 Actions，避免使用复杂的数据类型和方法。如果必须使用复杂的数据类型和方法，可以将其封装在 Action Creator 或中间件中，从而确保 Actions 必须是纯对象。

示例代码

下面是一个使用 Action Creator 和中间件的示例代码：

// www.javascriptcn.com code example
// Action Creator
function addTodo(id, text) {
  return {
    type: 'ADD_TODO',
    payload: {
      id,
      text,
      completed: false
    }
  };
}

// 中间件
const logger = store => next => action => {
  console.log('dispatching', action);
  const result = next(action);
  console.log('next state', store.getState());
  return result;
};

// Store
const store = createStore(
  reducer,
  applyMiddleware(logger, thunk)
);

// 使用 Action Creator
store.dispatch(addTodo(1, 'Learn Redux'));

// 使用中间件
function addTodoAsync(text) {
  return (dispatch) => {
    setTimeout(() => {
      dispatch(addTodo({
        id: Date.now(),
        text,
        completed: false
      }));
    }, 1000);
  };
}

store.dispatch(addTodoAsync('Learn Redux Async'));

指导意义

在使用 Redux 开发应用程序时，要注意 Actions 必须是纯对象的问题。遵循 Redux 的设计原则，尽可能使用纯对象作为 Actions，避免使用复杂的数据类型和方法。如果必须使用复杂的数据类型和方法，可以将其封装在 Action Creator 或中间件中，从而确保 Actions 必须是纯对象。同时，也要注意避免副作用和不可预测的状态变化，从而保证应用程序状态的可预测性和可维护性。最后，要善于使用 Redux 的工具和中间件，例如 Redux DevTools、redux-thunk、redux-saga 等，从而提高开发效率和代码质量。

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

Redux 常见问题解决：Actions 必须是纯对象

什么是纯对象？

为什么 Actions 必须是纯对象？

如何解决 Actions 必须是纯对象的问题？

示例代码

指导意义

接着读