Question

我目前正试图想出一种方法，可以在我的应用程序中上传文件后，从长时间运行的任务（几秒到一分钟）中获取信息。我正在使用react / redux，我正在尝试这个：

export const longTask = (file) => (dispatch) => {
    // setup file ready
    fileReader.onload = () => {
        let lastTime = Date.now();
        const lines = fileReader.result.split('\n');
        for (let i = 0; i < lines.length; i++) {
            const currentTime = Date.now();
            if (currentTime - lastTime >= 100) {
                dispatch(updateNumber(i / lines.length));
                lastTime = currentTime;
            }
            // Do long, intensive task for current line
        }
    }
}

将在redux-thunk内部运作。但问题是，dispatch只对要运行的动作进行排队，它不会立即运行它们，并且这会阻止整个React的呈现。有没有人有这样的模式可以帮助这种工作？我真的不想将工作卸载到Web工作者，因为工作正在构建一个非常大的数据对象，并且通过值而不是引用（意味着数据复制）向Web工作者传输数据和从Web工作者传输数据。

编辑：请注意，我使用的是React v15.6.2，而不是v16。*，因为它与Golden Layout冲突。

Answer 1

我认为如果您所描述的问题可以重写长任务，那么在经过一些迭代后，您可以安排剩下的工作，例如：与setTimeout。

Answer 2

我的方法是使用一个具有state.longTask.queue数组的reducer，在其中放置所有行，然后让react组件调度一个只处理队列中下一行的操作。这将使控制权返回到可以相应地更新进度的位置，并且在处理的两条线之间获得渲染周期。无需setTimeout.。

如何从react / redux应用程序中的函数中获得长任务的进度？

2 个答案: