Howto wrap takeLatest/takeEvery with solution

[jochumdev]

Hey,

I have the need to enable/disable a preloader on all saga calls, after a while I found the following solution for takeEvery/takeLatest in Typescript.

import {
  put,
  takeLatest as upstreamTakeLatest,
  SagaGenerator,
  takeEvery as upstreamTakeEvery,
} from "typed-redux-saga";
import { ActionPattern, ForkEffect } from "redux-saga/effects";
import { ActionMatchingPattern } from "@redux-saga/types";
import { ConfigModule } from "../..";

export const workerWrapper = <P extends ActionPattern>(
  type: P,
  worker: (action: ActionMatchingPattern<P>) => any
): ((action: ActionMatchingPattern<P>) => any) =>
  function* wrapped(action: ActionMatchingPattern<P>): any {
    yield* put(ConfigModule.actions.setPreloader(true));
    try {
      // Call the worker / wrapped action
      yield* worker(action);
    } finally {
      yield* put(ConfigModule.actions.setPreloader(false));
    }
  };

export function takeLatest<P extends ActionPattern>(
  pattern: P,
  worker: (action: ActionMatchingPattern<P>) => any
): SagaGenerator<never, ForkEffect<never>> {
  return upstreamTakeLatest(pattern, workerWrapper(pattern, worker));
}

export function takeEvery<P extends ActionPattern>(
  pattern: P,
  worker: (action: ActionMatchingPattern<P>) => any
): SagaGenerator<never, ForkEffect<never>> {
  return upstreamTakeEvery(pattern, workerWrapper(pattern, worker));
}

I'm posting here with the hope it helps someone else.

Kind regards,
René