redux-saga-cancelable-task.js

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

function* watchFetchData() {
  while (take('FETCH_REQUESTED')) {
    const fetchTask = yield fork(fetchData);
    yield take('CANCEL_FETCH');
    yield cancel(fetchTask);
  }
}

function* fetchData(action) {
  try {
    const data = yield call(fetchAPI, action.payload.url);
    yield put({type: 'FETCH_SUCCEEDED', data});
  } catch (error) {
    yield put({type: 'FETCH_FAILED', error});
  }
}

// Wrap axios
function fetchAPI(url) {
  const source = CancelToken.source();
  const request = axios.get(url);
  request[CANCEL] = () => source.cancel();
  
  return request;
}