Redux Saga TypeScript报错：类型'string'无法分配给'TakeableChannel'

问题场景 #

在使用typed-redux-saga结合Redux Toolkit派发带payload的action时，触发如下TypeScript错误：

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

相关代码片段：

export default function* watchAuth() {
  yield* takeLatest(startAuth.toString(), handleAuthUser); // 此处触发类型错误
}

使用的依赖版本：

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

handleAuthUser生成器函数代码：

function* handleAuthUser({ payload: { fields, isRegister } }) {
  const { email, password } = fields || {};
  try {
    if (isRegister) {
      // 用户注册逻辑
      yield* call(registerAWS, fields);
      yield* put(promptConfirmation({ email, password }));
    } else {
      // 用户登录逻辑
      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) {
      // 错误处理分支
    }
  }
}

Reducer中startAuth的定义：

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

错误原因 #

typed-redux-saga的takeLatest方法类型约束比原生redux-saga更严格，它不接受字符串类型的action type，而是要求直接传入Redux Toolkit创建的action creator函数，而非调用toString()后的字符串结果。

解决方案 #

1. 移除toString()调用：直接将startAuth这个action creator传入takeLatest
2. 完善handleAuthUser的参数类型：明确指定参数为对应action的类型，确保类型推导正确

修改后的代码 #

import { PayloadAction } from '@reduxjs/toolkit';
import { takeLatest, call, put } from 'typed-redux-saga';

// 定义startAuth对应的action类型
type StartAuthAction = PayloadAction<{
  fields: { [key: string]: string };
  isRegister?: boolean;
}>;

function* handleAuthUser(action: StartAuthAction) {
  const { payload: { fields, isRegister } } = action;
  const { email, password } = fields || {};
  try {
    if (isRegister) {
      yield* call(registerAWS, fields);
      yield* put(promptConfirmation({ email, password }));
    } else {
      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) {
      // 错误处理分支
    }
  }
}

export default function* watchAuth() {
  // 直接传入action creator，无需toString()
  yield* takeLatest(startAuth, handleAuthUser);
}

说明 #

typed-redux-saga会自动从action creator中推导action类型，确保saga中的action参数类型与Reducer中的定义完全匹配，既解决了类型错误，也提升了代码的类型安全性。

内容的提问来源于stack exchange，提问作者Mohammed Mounir