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

我正在尝试对商店进行多项更改,但在完成所有更改之前不会进行渲染.我想用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的新手,我从未使用异步中间件,但我认为它可以帮助我.

@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感兴趣,这将允许您仅使用一个通知事件来分派一系列操作.

有办法实现目标:

经典方式:

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

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

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