通过 eventChannel 在 redux-saga 中发出限制文件加载进度答案

【问题标题】：Emit throttled file load progress in redux-saga through eventChannel通过 eventChannel 在 redux-saga 中发出限制文件加载进度
【发布时间】：2019-05-18 07:43:46
【问题描述】：

我将redux-saga 与eventChannel 一起使用，以便通过进度跟踪处理资源加载。

我想知道为了消除过于频繁的加载进度事件的最佳模式是什么。我是否应该使用throttled 发射在较低级别处理它

import {
  eventChannel,
  END
} from 'redux-saga'
import request from 'superagent';
import { throttle } from 'throttle-debounce';



function loadFile(url) {
  return eventChannel(emitter => {

    const emitProgress = (emitter, payload) => emitter(payload);
    const emitProgressThrottled = throttle(500, emitProgress);

    request.post(url)
      .on('progress', event => {
        const payload = {
          percent: event.percent,
          type: 'progress'
        };

        emitProgressThrottled(emitter, payload)            

      })
      .then(res => {
        const payload = {
          data: res.body,
          type: 'finish'
        };

        emitter(payload);
        emitter(END);
      })
  })
}

还是在 redux-saga 范围 throttling eventChannel 发出的入站模式中处理它更好？

任何帮助表示赞赏。谢谢。

【问题讨论】：

我会在 redux-saga 范围内限制它。这使使用该通道的每个服务都可以决定是否要限制它，并且您将避免使用额外的库。也就是说，如果您确信您将始终想要限制它，那么较低级别的解决方案可能会保护您的一些写作。两种解决方案都没有错。
@MartinKadlec 你说得对。实际上我同意它严格依赖于状态管理的粒度和设计。我的观点是，进度事件发射的速度可能会给 redux/redux-saga 带来太多负担（尤其是在文件大小负载很大的情况下）。因此，考虑到通过 web-UI 进度条的进度通知是相关的但并不重要（松散的更新被认为是可以接受的），因此较低级别的限制方法。

标签： javascript reactjs redux redux-saga throttling

【解决方案1】：

自从我最初发布问题以来已经过去了几个星期，我的想法更加清晰。

对于所描述的场景，我更喜欢较低级别的油门方法（上述问题正文中的代码）。隔离 API 操作范围以及避免对 redux-saga 中间件的额外负载对我来说似乎更合理。

正如@Martin Kadlec 正确指出的那样，这两种解决方案都被认为是可以接受的。你会选择哪一个更符合软件设计模式和个人喜好。

【讨论】：