Redux Saga: Argument of type 'string' is not assignable to parameter of type 'TakeableChannel<unknown>'

Issue

dispatching action with payload, produces this typescript error:

Argument of type 'string' is not assignable to parameter of type 'TakeableChannel'.

Example:

export default function* watchAuth() {
yield* takeLatest(startAuth.toString(), handleAuthUser); // Argument of type 'string' is not assignable to parameter of type 'TakeableChannel'.
}

using:

"@reduxjs/toolkit": "^1.8.5",
"typed-redux-saga": "^1.5.0",

Edit: handleAuthUser generator function

function* handleAuthUser({ payload: { fields, isRegister } }) {
  const { email, password } = fields || {};
  try {
    if (isRegister) {
      // User registering an account
      yield* call(registerAWS, fields);
      yield* put(promptConfirmation({ email, password }));
    } else {
      // User is logging into his account
      const cognitoUser = yield* call(newCognitoUser, email);

      const authDetails = new AuthenticationDetails({
        Username: email,
        Password: password,
      });

      const res = yield* call(loginAWS, cognitoUser, authDetails);
      if (res.userAttributes) {
        const { email_verified, phone_number_verified, ...userAttributes } = res.userAttributes;
        yield* put(
          promptNewPassword({
            email,
            userAttributes,
            cognitoUser,
          }),
        );
      } else {
        yield* put(checkAuth());
      }
    }
  } catch (error) {
    switch ((error as any).code) {
      // switch cases
    }
  }
}

Reducer:

startAuth: (
      state,
      action: PayloadAction<{ fields: { [key: string]: string }; isRegister?: boolean }>,
    ) => {
      state.loading = true;
      state.errors = { login: {}, signup: {}, other: {} };
      state.userPendingConfirmation = null;
      state.userPendingNewPassword = null;
      state.resetPasswordUser = null;
    },

Solution

To solve this problem you need to modify the types of handleAuthUser. The issue is that takeLatest expects that first parameter of the saga that is going to be run (handleAuthUser) to be an object with a type property, but the way you have it defined now typescript assumes payload is the only property of that object, which doesn't match the expectation.

So changing it to:

type AnyAction = {type: string, [key: string]: any}
function* handleAuthUser({ payload: { fields, isRegister } }: AnyAction) {

will fix it since you are telling TS that the object has among other action params also the type property.

Answered By - Martin Kadlec