5

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;
    },
3

1 Answer 1

6

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.

2
  • 1
    I totally forgot that I had another redux slice, where I had the same issue and I solved it by importing PayloadAction from '@reduxjs/toolkit' and passing the payload object definition, same as the reducer. Thanks to you I remembered! Nov 8, 2022 at 13:58
  • function* handleAuthUser({ payload: { fields, isRegister }, }: PayloadAction<{ fields: { [key: string]: string }; isRegister?: boolean }>) { Nov 8, 2022 at 14:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.