如何在Redux-Toolkit/Redux中批量处理多个dispatch操作？

首先明确：Redux本身没有可配置的“等待周期”，你观察到连续两次dispatch只触发一次重渲染的情况，是React-Redux在React合成事件、useEffect回调等场景下自动启用的批量更新机制，但组件外的普通同步代码（比如你定义的window.foo）不在这个自动批量的覆盖范围内，所以每个dispatch都会触发独立的组件渲染。

以下是不需要把多个dispatch集中包裹的替代方案：

方案一：自定义全局批量dispatch包装器 #

通过包装Redux的dispatch方法，把同步触发的多个action缓存到队列，在当前事件循环的微任务阶段统一执行，从而触发一次组件渲染。

// 批量dispatch工具函数
let dispatchQueue = [];
let isBatching = false;

const batchedDispatch = (store) => (action) => {
  dispatchQueue.push(action);
  if (!isBatching) {
    isBatching = true;
    // 利用微任务在当前宏任务结束后统一执行队列
    queueMicrotask(() => {
      try {
        dispatchQueue.forEach(action => store.dispatch(action));
      } finally {
        dispatchQueue = [];
        isBatching = false;
      }
    });
  }
};

// 在configureStore时替换默认dispatch
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';

const store = configureStore({
  reducer: rootReducer,
  enhancers: [
    (createStore) => (...args) => {
      const baseStore = createStore(...args);
      // 替换原有dispatch为批量版本
      baseStore.dispatch = batchedDispatch(baseStore);
      return baseStore;
    }
  ]
});

这个方案不需要修改你现有的function1/function2/function3的代码，所有同步调用的dispatch都会被自动合并，组件只会在所有action执行完成后重渲染一次。

方案二：利用事件循环延迟执行 #

如果你不想全局修改dispatch，也可以在window.foo中把三个函数的调用放到同一个微任务里，让React-Redux自动合并更新：

window.foo = () => {
  queueMicrotask(() => {
    function1();
    function2();
    function3();
  });
};

这种方式利用了React-Redux对微任务内同步dispatch的自动批量处理，同样能实现一次重渲染的效果。

内容的提问来源于stack exchange，提问作者A.B.