redux-saga 中的 Action Channel 调用重复的动作答案

【问题标题】：Action Channel in redux-saga calls repeated actionsredux-saga 中的 Action Channel 调用重复的动作
【发布时间】：2020-06-09 17:30:52
【问题描述】：

我正在尝试使用actionChannel 顺序运行多个请求，问题是操作及其有效负载被多次检索（take），而我希望只检索一次。这是一个可重现的例子：

function* requestSequentially(action) {
  console.log('action', action); // contains type and payload
  const chan = yield actionChannel(action.type)
  let index = 0;
  while (true) {
    const ac = yield take(chan)
    yield index += 1
    console.log('channel', ac, index);
  }
}

行为如下

第一次分派此操作时仅记录 action: ...，即调用 actionChannel 之前的日志，并且永远不会从通道中检索操作。
下一次调用，输出channel, <action> 1。（先前的操作排队到频道）。
在后续调用中，它开始从频道中获取并记录所有先前的请求，如下所示：（假设当前调用是 #3）

channel <action> 3
channel <action> 2
channel <action> 1

如果是第 4 次调用，那么您可以想象它从 4 开始，然后下降到 1。

编辑： Saga 导出到 rootSaga 为： takeEvery(SAVE_SEQUENTIALLY, requestSequentially), ...

和行动： export const action = payload => ({ type: SAVE_SEQUENTIALLY, payload })

如何让 actionChannel 只执行一次操作？

【问题讨论】：

标签： reactjs redux redux-saga

【解决方案1】：

我可能会误解您要做什么，但在我看来，问题在于takeEvery 和actionChannel+take 的组合，因为它们都在等待相同的操作类型。

我认为你应该只使用给定类型 fork requestSequentially saga 而不是 takeEvery：

yield fork(requestSequentially, SAVE_SEQUENTIALLY)

然后将给定的类型用于actionChannel：

function* requestSequentially(type) {
  const chan = yield actionChannel(type)
  let index = 0;
  while (true) {
    const ac = yield take(chan)
    yield index += 1
    console.log('channel', ac, index);
  }
}

【讨论】：