如何为createAsyncThunk的第二个泛型设置为无参数类型

问题描述 #

我正在使用Firebase Authentication并通过Redux Toolkit管理状态。当我派发startGoogleSign动作时，它不需要任何参数：

export const googleSignIn = (dispatch: AppDispatch) => {
  dispatch(startGoogleSign());
};

但在创建异步thunk时，为了给rejectWithValue的负载添加类型，我必须为createAsyncThunk指定三个泛型：

export const startGoogleSignIn = createAsyncThunk<AuthState, any, RejectValue>(
  "auth/startGoogleSignIn",
  async (_, { rejectWithValue }) => {
    const authState = await signInWithGoole();
    if (!authState.uid)
      return rejectWithValue({
        errorMessage: authState.errorMessage || "Unknown error",
      });
    return authState;
  }
);

但如果第二个泛型设为any，调用startGoogleSign()时会提示“Expected 1 arguments, but got 0.ts(2554)”错误。请问是否可以将第二个泛型设置为无参数类型？或者有没有更优的方式为该thunk添加正确的类型？

解决方案 #

1. 使用void作为参数类型 #

将createAsyncThunk的第二个泛型设为void，这明确表示该Thunk不接收任何参数，TypeScript会允许调用时不传参数，直接解决报错问题：

export const startGoogleSignIn = createAsyncThunk<AuthState, void, RejectValue>(
  "auth/startGoogleSignIn",
  async (_, { rejectWithValue }) => {
    const authState = await signInWithGoole();
    if (!authState.uid)
      return rejectWithValue({
        errorMessage: authState.errorMessage || "Unknown error",
      });
    return authState;
  }
);

这里的_是占位符，用来表示我们确实不需要使用参数，符合代码规范。

2. 优化Thunk调用方式 #

既然Thunk本身不需要参数，你可以直接在需要的地方派发，无需额外封装googleSignIn函数，简化代码：

// 直接调用，无需封装
dispatch(startGoogleSignIn());

内容的提问来源于stack exchange，提问作者Johann Perez E