当多个组件使用它时取消 Saga

编程问答 2022-05-28

问题描述

我一直在努力解决这个问题，做了一些研究并打破了我的头脑，但我仍然没有弄清楚。

所以我有一个 React + Redux 应用程序。在某些时候，应用程序呈现多个相同的组件

return (
  <MyComponent id={1} path={path} />
  <MyComponent id={2} path={path} />
  <MyComponent id={3} path={path} />
)

这里，MyComponent 连接到 redux 并使用 Saga 进行 API 调用。我试图实现一种机制来取消这些 API 请求，如下所示：

export function* watchMyRequest(action) {
  const task = yield fork(getRequestSaga,action);
  yield take(RESET_REQUEST_DATA);
  yield cancel(task);
}

每次 path 更改时，我都会为 RESET_REQUEST_DATA 发送一个操作，该操作应该取消我的传奇。问题是，由于我有多个相同的组件，它们都会调用取消操作。

我的问题是，我如何才能使用 Sagas 调用特定的取消？

解决方法

如果你有相同的动作类型，那么你需要使用动作对象的其他部分来区分不同的实例。例如，在示例的 React 部分，您给每个组件一个 id。您可以将此 ID 作为监视/重置操作的一部分，然后使用 take(fn) api 侦听特定 ID。

function* watchMyRequest(action) {
  const task = yield fork(getRequestSaga,action);
  yield take(a => a.type === RESET_REQUEST_DATA && a.id === action.id);
  yield cancel(task);
}

你可以在这里看到它的工作：https://codesandbox.io/s/gyhlg?file=/src/index.js

,

感谢@Martin-Kadlec，我想出了类似他的回答：

export function* watchMyRequest(action) {
  const task = yield fork(getRequestSaga,action);
  yield take(`${RESET_REQUEST_DATA}_${action.payload.id}`);
  yield cancel(task);
}

这样我们就可以独立区分每个动作并在需要时取消它。

react-reduxreactjsreactjsreactjsreactjsreduxreduxreduxreduxredux-sagasagasaga