Actions with redux-observable

epic.ts

import { ofType } from 'redux-observable';
import { map, switchMap, takeUntil } from 'rxjs/operators';
import { Actions } from '../constants/action-constant';
import { ajax } from 'rxjs/ajax';
import { fetchNextRaceFulfill, onRaceListSuccess } from '../actions/racing-action';
import apiConstant from '../constants/api-constant';
import { Race, RaceData } from '../types/racing';

export const fetchNextToRaceEpic = (action$: any) => action$.pipe(
  ofType(Actions.FETCH_NEXT_RACE),
  switchMap((action: any) => {
    let url = apiConstant.getEndpoint(apiConstant.URLS.RACING.FETCH_NEXT_UP_RACES, []);
    url = apiConstant.formatQueryParams(url, {
      racingType: action.selectedRacingType.id,
    });

    return ajax.get(url).pipe(
      map(({response}) => fetchNextRaceFulfill(response)),
      takeUntil(action$.pipe(
        ofType(Actions.FETCH_NEXT_RACE_CANCEL),
      )),
    )
  }),
);

export const fetchRacingDataEpic = (action$: any) => action$.pipe(
  ofType(Actions.FETCH_RACING_DATA),
  switchMap((action: any) => {
    let url = apiConstant.getEndpoint(apiConstant.URLS.RACING.FETCH_DATA, [action.selectedDateFilter]);
    url = apiConstant.formatQueryParams(url, action.raceQueryParams);

    return ajax.get(url).pipe(
      map(({response}) => {
        let races: Race[] = [];

        response.map((raceList: RaceData) => {
          races = races.concat(raceList.items);
        });

        return onRaceListSuccess(races)
      }),
      takeUntil(action$.pipe(
        ofType(Actions.FETCH_RACING_DATA_CANCEL),
      )),
    )
  }),
);