redux-observable-cancelable-task.js

// Use RxJS ajax
const fetchEpic = (action$) =>
  action$.ofType('FETCH_REQUESTED')
    .mergeMap(action => {
      
      // We want to cancel only the AJAX request, not stop the Epic from listening for any future actions.
      // https://github.com/redux-observable/redux-observable/blob/master/docs/recipes/Cancellation.md
      return Observable
        .ajax
        .get(action.payload.url)
        .map(data => ({ type: 'FETCH_SUCCEEDED', data }))
        .catch(error => Observable.of({ type: 'FETCH_FAILED', error }))
        .takeUntil({ type: 'CANCEL_FETCH' });
    })

// Or use axios
// import axios from 'axios';

// const fetchEpic = (action$) =>
//   action$.ofType('FETCH_REQUESTED')
//     .mergeMap(action => {
      
//       // We want to cancel only the AJAX request, not stop the Epic from listening for any future actions.
//       // https://github.com/redux-observable/redux-observable/blob/master/docs/recipes/Cancellation.md
//       return axios.get(action.payload.url)
//         .map(data => ({ type: 'FETCH_SUCCEEDED', data }))
//         .catch(error => Observable.of({ type: 'FETCH_FAILED', error }))
//         .takeUntil(action$.ofType('CANCEL_FETCH')));
//     });