React redux操作必须是纯对象。使用自定义中间件进行异步操作

基础概念

React Redux 是一个用于管理 React 应用程序状态的库。Redux 通过单一数据源（即 store）来管理应用的状态，所有的状态变更都通过 dispatching actions 来完成。Actions 必须是纯对象，这意味着它们应该是不可变的，并且不包含任何副作用。

为什么操作必须是纯对象

1. 可预测性：纯对象保证了 action 的内容在 dispatch 时和到达 reducer 时是一致的。
2. 性能优化：React Redux 使用浅比较（shallow comparison）来决定是否需要重新渲染组件，纯对象可以更容易地进行这种比较。
3. 易于调试：Redux DevTools 等工具依赖于 action 的不可变性来追踪状态变化。

异步操作的问题

在 Redux 中，action creators 通常是同步的，这意味着它们立即返回一个 action 对象。然而，在实际应用中，我们经常需要进行异步操作，如 API 请求。直接在 action creator 中进行异步操作会违反 Redux 的原则，因为 action creator 应该只负责返回 action 对象。

自定义中间件进行异步操作

为了解决这个问题，可以使用中间件来处理异步操作。中间件是一个函数，它接收 Redux store 的 dispatch 和 getState 方法作为参数，并返回一个函数。这个返回的函数接收 action creator 作为参数，并可以执行异步操作，然后在适当的时候 dispatch 实际的 action。

示例代码

以下是一个简单的自定义中间件示例，用于处理异步操作：

const asyncMiddleware = ({ dispatch, getState }) => next => action => {
  // 检查 action 是否是一个函数（即异步 action creator）
  if (typeof action === 'function') {
    return action(dispatch, getState);
  }

  // 如果是普通 action，直接传递给下一个中间件或 reducer
  return next(action);
};

// 使用中间件
const store = createStore(
  rootReducer,
  applyMiddleware(asyncMiddleware)
);

// 异步 action creator 示例
const fetchData = () => async (dispatch, getState) => {
  dispatch({ type: 'FETCH_DATA_REQUEST' });

  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
  } catch (error) {
    dispatch({ type: 'FETCH_DATA_FAILURE', error });
  }
};

应用场景

自定义中间件在以下场景中非常有用：

1. API 请求：处理从服务器获取数据的异步操作。
2. 延迟操作：如定时器、动画等。
3. 复杂的状态管理逻辑：如需要根据多个 action 进行状态更新的情况。

参考链接

• Redux Middleware
• Redux Thunk（一个常用的异步中间件）

通过使用自定义中间件，可以有效地处理 Redux 中的异步操作，同时保持 action 的纯对象特性。