React+Redux中如何实现异步dispatch调用的批量更新？

自React 18起，状态更新会进行automatic batching（自动批处理）。使用Redux时也依赖批处理机制，但该机制在异步dispatch调用场景下似乎失效。

例如以下thunk代码：

const incrementAsync = createAsyncThunk("incrementAsync", (_, { dispatch }) => {
  setTimeout(() => {
    dispatch(increment());
  }, 1000);
});

当执行如下调用时，组件会重新渲染三次（视觉上计数器仅变化一次）：

const increment = () => {
  dispatch(incrementAsync());
  dispatch(incrementAsync());
  dispatch(incrementAsync());
};

实际业务场景并非简单计数器，但必须使用异步调用，希望无论更新次数多少，组件仅重新渲染一次，如何实现这些更新的批量处理？

1. 使用Redux Toolkit的batch函数手动合并更新 #

Redux Toolkit内置的batch函数可以在异步回调中手动包裹多个dispatch，将它们合并为一次状态更新，从而避免组件多次重渲染。

针对你的场景，可以调整代码逻辑，等待所有异步操作完成后，用batch统一执行状态更新：

import { batch } from '@reduxjs/toolkit';

// 创建用于批量处理的thunk
const batchIncrementAsync = createAsyncThunk("batchIncrementAsync", async (_, { dispatch }) => {
  // 模拟多个异步任务，替换为实际业务的异步逻辑
  const asyncTasks = [
    new Promise(resolve => setTimeout(resolve, 1000)),
    new Promise(resolve => setTimeout(resolve, 1000)),
    new Promise(resolve => setTimeout(resolve, 1000))
  ];

  // 等待所有异步任务完成
  await Promise.all(asyncTasks);

  // 批量执行dispatch，合并状态更新
  batch(() => {
    dispatch(increment());
    dispatch(increment());
    dispatch(increment());
  });
});

// 调用时只需触发一次批量thunk
const increment = () => {
  dispatch(batchIncrementAsync());
};

2. 调整独立异步操作的状态更新时机 #

如果你的业务中多个异步操作是独立执行的，但希望它们的状态更新被合并，可以将每个异步操作的结果暂存，待所有操作完成后，统一通过batch执行dispatch，而不是每个操作单独触发dispatch。

核心原理 #

React 18的自动批处理仅作用于同步事件回调（如点击、表单输入等），而setTimeout、Promise回调、网络请求响应等异步回调中的状态更新不会被自动批处理。Redux Toolkit的batch函数可以强制将多个dispatch合并为一次状态变更，确保组件仅重渲染一次。

内容的提问来源于stack exchange，提问作者Arkellys