Discussion on: Clean Up Async Requests in `useEffect` Hooks

[Yurui Zhang]

If you are using takeLatest - redux-saga already cancels the effect for you. If you want to abort the request as well, try this:

export function* requestAPI(action) {
  const abortController = new AbortController();
  try {
    const response = yield call(fetch, url, { ...fetchParams, signal: abortController.signal });
  } finally {
    if (yield cancelled()) {
      abortController.abort();
    }
  }
}

If you want to cancel sagas manually, check out their cancellation documentation:
redux-saga.js.org/docs/advanced/Ta...

[Davyd NRB]

or even better - you could write your custom fetchAPI, which would look something like this

import axios, { CancelToken } from 'axios'
import { CANCEL } from 'redux-saga'

export default function fetchAPI(url) {
  const source = CancelToken.source()
  const request = axios.get(url, { cancelToken: source.token })
  request[CANCEL] = () => source.cancel()
  return request
}

link: github.com/redux-saga/redux-saga/i...