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

Question

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

所以我有一个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发送一个操作，这应该会取消我的saga。问题是，由于我有多个相同的组件，它们都将调用cancel操作。

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

Answer 1

如果您有相同的操作类型，则需要使用操作对象的其他部分来区分不同的实例。例如，在示例的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

Answer 2

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

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

这样，我们就可以独立地区分每个操作，并随时取消它。