redux-saga 中的批处理操作

Question

我在 https://react-redux.js.org/api/batch 上读到可以使用 batch “ 来确保在 React 之外调度的多个动作只会导致单个渲染更新” ，像这样（我在 React 事件处理程序中使用，即）：

...
const submitData = event => {
    // ... some code before
    batch(() => {
        dispatch(first())
        dispatch(second())
    })
}
...

但我的问题是如何在 redux-saga 中正确地 batch 操作，以便结果是一次重新渲染而不是多次重新渲染，同时从 saga 中调度多个操作？我尝试将多个 put 放入 all 数组中，但不确定它是否真的批处理 put:

yield all([
    put(addFirst({first: 1})),
    put(addAnother({second: 2)),
]);

上面的方法是因为我在https://github.com/manaflair/redux-batch where the author wrote "Since this package got written, redux-saga improved and using all([ put(...), put(...) ]) seems to properly batch the two actions into a single subscription event, making redux-batch redundant in this scenario.", but in https://github.com/manaflair/redux-batch/issues/21 another person wrote that batching is handled by React unstable_batchedUpdates API. Still redux-toolkit (which I use) have an example with redux-batch as a store enhancer (https://github.com/reduxjs/redux-toolkit/blob/master/docs/api/configureStore.md）阅读了文档。

所以如果有人知道正确的方法，请分享您的知识！最好的问候

编辑： 我只在 React 事件处理程序中使用 batch 来批处理多个操作。在 redux-saga 我想使用 redux-batch 包。

所以正确的方法（如果使用 redux-batch 显然 redux-toolkit 似乎喜欢因为例子）是：

import { reduxBatch }                            from '@manaflair/redux-batch';
import { put, takeEvery }                        from 'redux-saga/effects';
import createSagaMiddleware                      from 'redux-saga';
import { applyMiddleware, compose, createStore } from 'redux';

let sagaMiddleware = createSagaMiddleware();
let store = createStore(reducer, compose(reduxBatch, applyMiddleware(sagaMiddleware), reduxBatch));

sagaMiddleware.run(function* () {
  yield takeEvery(`*`, function* (action) {

    // Duplicate any event dispatched, and once again, store
    // listeners will only be fired after both actions have
    // been resolved/

    yield put([ action, action ]);

  });
});

因此 yield put([ action, action ]);，在 put 中有一个数组并分派多个动作？

Answer 1

我是 Redux 维护者和 Redux Toolkit 的作者。

实际上我刚刚写了一篇名为 A Comparison of Redux Batching Techniques 的博客 post，其中涵盖了 Redux 操作可用的各种形式的批处理。

正如我刚刚在 redux-batch 问题中评论的那样：

The unstable_batchedUpdates() usage within React-Redux itself only attempts to minimize the nested re-renders from within a single dispatch. That does not overlap with the goal of this project, which attempts to allow dispatching multiple actions at once while only notifying store subscribers a single time.

根据您最初的问题，我不确定您是否可以在 sagas 中正确使用 React-Redux 的 batch() API，因为需要 yield put()。 batch() API（这只是 React 自己的 unstable_batchedUpdates() API，重新导出）依赖于跟踪在单个事件循环滴答期间排队的任何 React 状态更新，并且我怀疑使用发电机可能无法解决这个问题。我必须查看实际示例才能确定。

无论如何，根据博客 post，有多个批处理选项，它们以不同的方式工作。这完全是您要解决的实际用例的问题。

Answer 2

我认为你可以 put 根据文档

yield put((dispatch) => {
  batch(() => {
    dispatch(action1);
    dispatch(action2);
  });
});

redux-saga 中的批处理操作

Batching actions in redux-saga

batching

reactjs

redux

redux-saga