React/Redux Toolkit TypeScript中useDispatch传参报错：Expected 0 arguments

错误原因 #

你遇到的Expected 0 arguments, but got 1.ts(2554)错误，核心是**createAsyncThunk定义的register thunk没有正确声明接受参数的类型**，导致TypeScript认为该thunk action creator不允许传入任何参数。

分步代码修正 #

1. 完善authService.ts的类型定义 #

确保注册函数明确接受用户数据参数，并定义对应的用户类型：

// authService.ts
// 定义用户数据类型
export interface User {
  name: string;
  email: string;
  password: string;
  // 根据你的表单添加其他字段
}

// 注册函数接收User类型的参数
export const register = async (userData: User) => {
  // 替换为你的实际API请求逻辑
  const response = await fetch('/api/auth/register', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(userData)
  });
  return response.json();
};

2. 修正authSlice.ts的createAsyncThunk定义 #

给createAsyncThunk指定泛型（返回值类型 + 参数类型），并在payloadCreator中接收参数：

// authSlice.ts
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { register as registerService, User } from './authService';

// 定义Auth状态类型
interface AuthState {
  user: User | null;
  isLoading: boolean;
  isError: boolean;
  isSuccess: boolean;
  message: string;
}

const initialState: AuthState = {
  user: null,
  isLoading: false,
  isError: false,
  isSuccess: false,
  message: ''
};

// 正确定义register thunk：泛型<返回值类型, 参数类型>
export const register = createAsyncThunk<User, User>(
  'auth/register',
  async (userData, thunkAPI) => {
    try {
      return await registerService(userData);
    } catch (error) {
      // 处理错误并返回错误信息
      const errMsg = (error as Error).message || '注册失败';
      return thunkAPI.rejectWithValue(errMsg);
    }
  }
);

const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    reset: (state) => {
      state.isLoading = false;
      state.isError = false;
      state.isSuccess = false;
      state.message = '';
    }
  },
  extraReducers: (builder) => {
    builder
      .addCase(register.pending, (state) => {
        state.isLoading = true;
      })
      .addCase(register.fulfilled, (state, action) => {
        state.isLoading = false;
        state.isSuccess = true;
        state.user = action.payload;
      })
      .addCase(register.rejected, (state, action) => {
        state.isLoading = false;
        state.isError = true;
        state.message = action.payload as string;
        state.user = null;
      });
  }
});

export const { reset } = authSlice.actions;
export default authSlice.reducer;

3. 确保Register.tsx中参数类型匹配 #

在组件中构造符合User类型的newUser，再传递给dispatch：

// Register.tsx
import { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { register, reset } from './authSlice';
import type { RootState } from '../store'; // 导入你的RootState类型
import type { User } from './authService';

const Register = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: '',
    password2: ''
  });

  const { name, email, password, password2 } = formData;
  const dispatch = useDispatch();
  const { isLoading, isError, isSuccess, message } = useSelector(
    (state: RootState) => state.auth
  );

  useEffect(() => {
    if (isSuccess) {
      dispatch(reset());
      // 这里可以添加跳转逻辑，比如跳转到登录页
    }
    if (isError) {
      console.error(message);
    }
    return () => dispatch(reset());
  }, [isSuccess, isError, message, dispatch]);

  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData(prev => ({ ...prev, [e.target.name]: e.target.value }));
  };

  const onSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (password !== password2) {
      console.error('密码不匹配');
      return;
    }
    // 构造符合User类型的参数
    const newUser: User = { name, email, password };
    // 现在dispatch可以正常接收参数，不会报错
    dispatch(register(newUser));
  };

  if (isLoading) return <div>加载中...</div>;

  return (
    <div className="register-form">
      <h2>注册账号</h2>
      <form onSubmit={onSubmit}>
        <div>
          <label>姓名:</label>
          <input type="text" name="name" value={name} onChange={onChange} required />
        </div>
        <div>
          <label>邮箱:</label>
          <input type="email" name="email" value={email} onChange={onChange} required />
        </div>
        <div>
          <label>密码:</label>
          <input type="password" name="password" value={password} onChange={onChange} required />
        </div>
        <div>
          <label>确认密码:</label>
          <input type="password" name="password2" value={password2} onChange={onChange} required />
        </div>
        <button type="submit" disabled={isLoading}>注册</button>
      </form>
    </div>
  );
};

export default Register;

关键要点 #

• createAsyncThunk的泛型语法：createAsyncThunk<ReturnType, ArgType>，必须明确指定参数类型，TypeScript才能正确推断action creator的参数要求。
• 确保所有涉及用户数据的地方都使用统一的User类型，避免类型不匹配。
• 在thunk的payloadCreator中必须接收参数，并传递给对应的service函数。

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