当多个组件使用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调度一个应该取消我的传奇的动作。问题是，由于我有多个相同的组件，它们都将调用取消操作。

我的问题是，我如何才能管理调用一个特定的取消使用传奇?

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);
}

这样我们就可以独立地区分每个动作，并在我们想要的时候取消它。