React + Redux，如何在每次派发后而不是每次派发后呈现？

Question

我正在尝试对html" target="_blank">存储进行多次更改，但是直到所有更改完成后才进行渲染。我想用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

有一些方法可以实现目标：

经典方式：

通常：动作描述 发生某事 的 事实 ，但没有指定应用程序的状态如何响应而改变。这是减速器的工作。这也意味着
行动不是二传手 。

因此，您可以描述发生了什么并累积更改，并调度 一项 操作 ，例如：

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

然后对减速器中的动作做出反应：

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

另一种方法 是重新渲染很关键时：

那么您可以考虑限制组件，这些组件可以在状态更改时重新呈现。例如，您可以shouldComponentUpdate用来检查是否应渲染组件。您也可以使用
reselect ，以便在计算派生数据后不 重新 呈现连接的组件…

非标准方式： redux-batched-action

它的工作原理类似于交易。

在此示例中，将一次通知订户：

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

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