javascript - React + Redux，如何不在每次调度后渲染，而是在多次调度后渲染？

Question

我正在尝试对商店进行多项更改，但在完成所有更改后才进行渲染。我想用 redux-thunk 做到这一点。

这是我的 Action 创建器:

function addProp(name, value) {
    return { type:'ADD_PROP', name, value }
}

function multiGeoChanges(...changes) {
    // my goal here is to make multiple changes to geo, and make sure that react doesnt update the render till the end
    return async function(dispatch, getState) {
        for (let change of changes) {
            dispatch(change);
            await promiseTimeout(2000);
        }
    }
}

我像这样发送我的异步 Action 创建者:

store.dispatch(multiGeoChanges(addProp(1, "val1"), addProp(2, "val2"), addProp(3, "val3")));

然而，这会导致在每次 dispatch 后进行渲染。我是 redux-thunk 的新手，我从未使用过异步中间件，但我认为它可以帮助我。

Answer 1

@Kokovin Vladislav 的回答是正确的。添加一些额外的上下文:

Redux 将在每次 dispatch 后通知所有订阅者。要减少重新呈现，可以减少分派(dispatch)次数，或者使用几种方法中的一种来“批处理”分派(dispatch)和通知。有关详细信息，请参阅有关更新事件的 Redux 常见问题解答:http://redux.js.org/docs/faq/Performance.html#performance-update-events .

我最近还写了几篇与此主题相关的博文。 Idiomatic Redux: Thoughts on Thunks, Sagas, Abstraction, and Reusability讨论了使用 thunk 的优缺点，并总结了几种处理分派(dispatch)批处理的方法。 Practical Redux Part 6: Connected Lists, Forms, and Performance描述了关于 Redux 性能需要注意的几个关键方面。

最后，还有其他几个库可以帮助批量处理商店更改通知。查看Store#Store Change Subscriptions我的部分Redux addons catalog有关相关插件的列表。特别是，您可能对 https://github.com/manaflair/redux-batch 感兴趣，这将允许您仅使用一个通知事件来分派(dispatch)一系列操作。