reactjs - 如何在没有不必要渲染的情况下创建可重用的异步 thunk

Question

我有以下两个 Redux 操作(thunk)

export const getA = () => async (dispatch, getState) => {
  const response = await http.get('/get-a');
  return dispatch({ type: 'FETCHED_A', payload: response });
}

export const getB = () => async (dispatch, getState) => {
  const response = await http.get('/get-b');
  return dispatch({ type: 'FETCHED_B', payload: response });
}

每个都可以单独使用并且效果很好。
当我想异步使用它们时，我使用以下操作:

export const getAll = () => async (dispatch, getState) => {
  await Promise.allSettled([ dispatch(getA()), dispatch(getB()) ])
}

哪个效果很好，但是当我使用它时，组件会渲染两次(Promise 中的每次调度一次)，如何更新此代码以删除不必要的渲染？
(但这样功能仍然可以单独重用)。
我想过一个链接解决方案，但我还没有弄清楚如何让它工作，因为我不能将对象作为 Action 传递，所以我不确定它是否可能。

Aobj.fetch().dispatch();
Bobj.fetch().dispatch();

和异步获取，例如:

Promise.allSettled([Aobj.fetch(), Bobj.fetch()])
.then(response => {
  dispatch({ type: 'ALL_FETCHED', payload: response })
})

PS:此代码仅为简化代码示例，以增加我被理解的机会

Answer 1

尝试使用批处理:

  import { batch } from 'react-redux';

  const test = () => {
    batch(() => {
      dispatch(getA);
      dispatch(getB);
    });
  };