时间戳

首页 > 解决方案 > 向用户显示“For”循环的状态

reactjs - 向用户显示“For”循环的状态

问题描述

我有一个动作需要相当长的时间才能完成。它将遍历一个包含超过 250k 个条目的数组。对于每个条目，它将执行一些逻辑。我想通知用户操作进度，这将是：

let progress = (i / array.length) * 100

如何将其添加到 redux 存储或组件状态，以便我可以在 UI 中传达当前进度？

我尝试调度一个动作（如下所示），它使用当前迭代器更新存储进度，但减速器仅在创建 for 循环时执行。

    export const generateKeyMap = (mapFrom, mapTo) => {
      return async (dispatch) => {
        await dispatch(startGeneration()); <-- This only runs when I use a setTimeout for the following action.
        setTimeout(() => {
          dispatch(buildKeyMap(mapFrom, mapTo));
        }, 100);
      };
    };
    
    export const buildKeyMap = (mapFrom, mapTo) => {
      return async (dispatch) => {
        let keyMap = {};
        for (let i = 0; i < mapFrom.length; i++) {
          await dispatch(reportProgress(i)); // <-- This does not update in store until for loop is done.
            let randomIndex = randomIntFromInterval(0, mapTo.length - 1);
            let key = mapFrom[i].toString();
            let value = mapTo[randomIndex].toString();
            Object.assign(keyMap, { [key]: value });
            mapTo.splice(randomIndex, 1);     
        }
          await dispatch(stopGeneration());
          return { type: actionTypes.DELIVERKEYMAP, payload: keyMap };
        }
      };

标签： reactjsloopsasynchronousreact-redux

解决方案

推荐阅读