Redux Saga - yield spawn takeEvery call no overload

Question

I use redux-saga version 1.1.3 and have this here:

import {
  spawn,
  race,
  take,
  call,
  put,
  takeEvery,
  delay,
} from "redux-saga/effects";
import {
  MessageCenterActionTypes
} from "../types";

function remove(notification) {
  return {
    type: MessageCenterActionTypes.MESSAGECENTER_REMOVE,
    notification,
  };
}

export function* saga() {
  yield spawn(
    takeEvery,
    MessageCenterActionTypes.MESSAGECENTER_ENQUEUE,
    removeNotificationAfterElapsedTime,
    4000,
  );
}

export function* removeNotificationAfterElapsedTime(waitFor, {
  notification
}) {
  const {
    shouldBeRemoved
  } = yield race({
    shouldBeRemoved: call(delay, waitFor),
    _: take(
      (action) =>
      action.type === MessageCenterActionTypes.MESSAGECENTER_REMOVE &&
      action.notification.id === notification.id,
    ),
  });

  if (shouldBeRemoved) {
    yield put(remove(notification));
  }
}

export default saga;

But in yield spawn(takeEvery, MessageCenterActionTypes.MESSAGECENTER_ENQUEUE, removeNotificationAfterElapsedTime, 4000,);

it says:

No overload matches this call.
  The last overload gave the following error.
    Argument of type '{ <P extends ActionPattern<Action<any>>>(pattern: P, worker: (action: ActionMatchingPattern<P>) => any): ForkEffect<never>; <P extends ActionPattern<...>, Fn extends (...args: any[]) => any>(pattern: P, worker: Fn, ...args: HelperWorkerParameters<...>): ForkEffect<...>; <A extends Action<...>>(pattern: ActionPattern...' is not assignable to parameter of type '{ context: unknown; fn: (this: unknown, ...args: any[]) => any; }'.
      Type '{ <P extends ActionPattern<Action<any>>>(pattern: P, worker: (action: ActionMatchingPattern<P>) => any): ForkEffect<never>; <P extends ActionPattern<...>, Fn extends (...args: any[]) => any>(pattern: P, worker: Fn, ...args: HelperWorkerParameters<...>): ForkEffect<...>; <A extends Action<...>>(pattern: ActionPattern...' is missing the following properties from type '{ context: unknown; fn: (this: unknown, ...args: any[]) => any; }': context, fn

How should the call look like ?

Answer 1

spawn function can accept single generator function and inside of this generator function you can define your takeEvery logic. The rest of your code doesn't require any changes.

export function* saga() {
  yield spawn(function*() {
    yield takeEvery(
      MessageCenterActionTypes.MESSAGECENTER_ENQUEUE,
      removeNotificationAfterElapsedTime,
      4000,
    );
  });
}