Redux Observable取消以前的请求

import { ofType } from 'redux-observable';
import { ajax } from 'rxjs/ajax';
import { map, switchMap, takeUntil } from 'rxjs/operators';

const FETCH_DATA = 'FETCH_DATA';
const CANCEL_FETCH = 'CANCEL_FETCH';
const FETCH_SUCCESS = 'FETCH_SUCCESS';

const fetchData = () => ({ type: FETCH_DATA });
const cancelFetch = () => ({ type: CANCEL_FETCH });
const fetchSuccess = (data) => ({ type: FETCH_SUCCESS, payload: data });

const fetchDataEpic = (action$, state$) =>
  action$.pipe(
    ofType(FETCH_DATA),
    switchMap(() => {
      // 取消之前的请求
      if (state$.value.cancelFetch) {
        state$.value.cancelFetch.unsubscribe();
      }

      const cancelToken = new AbortController();
      const { signal } = cancelToken;

      return ajax.getJSON('https://api.example.com/data', { signal }).pipe(
        map((response) => fetchSuccess(response)),
        takeUntil(action$.pipe(ofType(CANCEL_FETCH))),
        takeUntil(signal)
      );
    })
  );

export const cancelFetchEpic = (action$) =>
  action$.pipe(
    ofType(CANCEL_FETCH),
    map(() => {
      // 取消当前请求
      const cancelToken = new AbortController();
      cancelToken.abort();
    })
  );

// 在Redux store中应用Redux Observable
import { createStore, applyMiddleware } from 'redux';
import { createEpicMiddleware } from 'redux-observable';

const epicMiddleware = createEpicMiddleware();

const rootReducer = (state = {}, action) => {
  switch (action.type) {
    case FETCH_SUCCESS:
      return { ...state, data: action.payload };
    default:
      return state;
  }
};

const store = createStore(rootReducer, applyMiddleware(epicMiddleware));

epicMiddleware.run(fetchDataEpic);
epicMiddleware.run(cancelFetchEpic);

// 发起请求
store.dispatch(fetchData());

// 取消请求
store.dispatch(cancelFetch());