reactjs - Cancel Saga when multiple components use it

Question

I've been trying to work this out, making some research and breaking my head, but I've still haven’t figured this out.

So I have a React + Redux application. At some point, the application renders multiple same components

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

Here, MyComponent is connected to redux and makes an API call using Saga. I tried to implement a mechanism to be able to cancel those API request with something like this:

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

Each time path changes, I dispatch an action for RESET_REQUEST_DATA which should cancel my saga. The problem is that as I have multiple identical components, they will all call on the cancel action.

My question is, how can I manage just to call on an specific cancel using Sagas?

question from:https://stackoverflow.com/questions/65928541/cancel-saga-when-multiple-components-use-it

Answer 1

If you have the same action type, then you need to use other part of the action object to differentiate between the various instances. For example, in the React part of your example you give each component an id. You can include this id as part of the watch/reset actions and then use the take(fn) api to listen for particular 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);
}

You can see it working here: https://codesandbox.io/s/gyhlg?file=/src/index.js