我正在尝试对商店进行多项更改,但在完成所有更改后才进行渲染。我想用 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 的新手,我从未使用过异步中间件,但我认为它可以帮助我。
最佳答案
@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)一系列操作。
关于javascript - React + Redux,如何不在每次调度后渲染,而是在多次调度后渲染?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41646353/