React + Redux,如何在每次调度后渲染,但经过几次？

Question

我正在尝试对商店进行多项更改,但在完成所有更改之前不会进行渲染.我想用redux-thunk做到这一点.

这是我的动作创作者:

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);
        }
    }
}

我派遣我的异步动作创建者:

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

然而,这导致每个后面的渲染反应dispatch.我是redux-thunk的新手,我从未使用异步中间件,但我认为它可以帮助我.

Answer 1

@Kokovin弗拉迪斯拉夫的回答是正确的.要添加一些其他上下文:

Redux将在每次发送后通知所有订户.要减少重新渲染,要么调度次数较少,要么使用多种方法之一来"批量"调度和通知.有关更多信息,请参阅有关更新事件的Redux常见问题解答:http://redux.js.org/docs/faq/Performance.html#performance-update-events.

我最近还写了几篇与此主题相关的博客文章. 惯用的Redux:关于Thunks,Sagas,Abstraction和Reusability的思考讨论了使用thunk的优缺点,并总结了处理调度批处理的几种方法. 实用的Redux第6部分:连接列表,表单和性能描述了有关Redux性能需要注意的几个关键方面.

最后,还有其他几个库可以帮助批量存储更改通知.请参阅Redux插件目录的Store#Store Change Subscriptions部分,以获取相关插件的列表.特别是,您可能对https://github.com/manaflair/redux-batch感兴趣,这将允许您仅使用一个通知事件来分派一系列操作.

Answer 2

在 react-redux 7.0.1+ 中，批处理现在是内置的。7.0.1 的发行说明：

https://github.com/reduxjs/react-redux/releases/tag/v7.0.1

批量更新

React 有一个 stable_batchedUpdates API，它用于将来自同一事件循环滴答的多个更新组合在一起。React 团队鼓励我们使用它，并且我们已经更新了我们的内部 Redux 订阅处理以利用这个 API。通过减少由 Redux 存储更新引起的不同渲染的数量，这也应该有助于提高性能。

function myThunk() {

   return (dispatch, getState) => {

       // should only result in one combined re-render, not two

       batch(() => {

           dispatch(increment());

           dispatch(increment());

       })

   }

}

Answer 3

有办法实现目标:

经典方式:

通常:操作描述事件发生的事实,但不指定应用程序的状态如何响应变化.这是减速机的工作.这也意味着行动不是设定者.

因此,您可以描述已发生的事情并积累更改,并发送一个 类似于以下内容的操作:

const multipleAddProp = (changedProps) =>({
   type:'MULTIPLE_ADD_PROP', changedProps
});

然后对reducer中的动作做出反应:

const geo=(state,action)=>{
   ...
   switch (action.type){
   case 'MULTIPLE_ADD_PROP':
     // apply new props
   ...
   }
}

另一种方式重新渲染至关重要:

那么你可以考虑限制组件,这些组件可以在状态变化时重新渲染.例如,您可以shouldComponentUpdate用来检查是否应该渲染组件.您也可以使用重新选择,以便在计算派生数据后不重新渲染连接的组件...

非标准方式: redux-batched-action

它的工作方式类似于交易.

在此示例中,订阅者将收到一次通知:

import { batchActions } from 'redux-batched-actions';

const multiGeoChanges=(...arrayOfActions)=> dispatch => {
    dispatch( batchActions(arrayOfActions) );
}