reactjs - Sequence execution in epic

Question

I need to modify an epic in order to call additional action after finishing deletion, the epic looks like:

const deleteComponentEpic: Epic<
  AppActions,
  AppActions,
  AppStore,
  ComponentDetailsEpicsDependencies
> = (action$, _, { components }) =>
  action$.pipe(
    filterAction(deleteComponentAction.request),
    exhaustMap(action =>
      components.deleteComponent(action.payload.id).pipe(
        map(() => deleteComponentAction.success()),
        catchError((error: Error) => of(deleteComponentAction.failure(errorHandler(error)))),
      ),
    ),
  );

I need to call following action when deletion went successfully, how to do it? Below is import of my action:

import { fetchCategoryComponentList } from '../../store';

question from:https://stackoverflow.com/questions/65942805/sequence-execution-in-epic

Answer 1

There is no requirement that you need to have a one-to-one in/out ratio. You can emit multiple actions using mergeMap (aka flatMap) if you need to. You can do following -

components.deleteComponent(action.payload.id).pipe(
        mergeMap(() => of(deleteComponentAction.success(), fetchCategoryComponentList())),
        catchError((error: Error) => of(deleteComponentAction.failure(errorHandler(error)))),
      ),

Read this answer for more info: https://stackoverflow.com/a/40895613/11167389