TS2345错误求助：异步Thunk Action无法传入Redux Dispatch

这个错误的核心原因是：你编写的fetchToken是一个Redux Thunk（返回函数的action creator），但默认的Dispatch类型仅接受普通的Action对象，无法处理返回函数的thunk，因此出现类型不匹配。

解决方案步骤： #

1. 配置Redux Store并启用Thunk中间件
   确保你的store已经正确添加了thunk中间件（如果还没加的话）：

   import { createStore, applyMiddleware } from 'redux';
   import thunk from 'redux-thunk';
   import rootReducer from './path/to/rootReducer';
   
   export const store = createStore(rootReducer, applyMiddleware(thunk));
   

2. 定义自定义的Dispatch类型
   在store相关的类型文件中，定义支持thunk的AppDispatch和RootState类型：

   import { ThunkDispatch } from 'redux-thunk';
   import { AnyAction } from 'redux';
   import rootReducer from './path/to/rootReducer';
   
   // 全局状态的类型，由rootReducer的返回值推导
   export type RootState = ReturnType<typeof rootReducer>;
   
   // 支持Thunk的Dispatch类型
   export type AppDispatch = ThunkDispatch<RootState, unknown, AnyAction>;
   

3. 在组件中使用自定义Dispatch类型
   在调用dispatch的组件里，使用AppDispatch来约束useDispatch的类型：

   import { useDispatch } from 'react-redux';
   import { AppDispatch } from './path/to/store';
   import { fetchToken } from './path/to/your/actions';
   
   // 组件内部获取dispatch
   const dispatch = useDispatch<AppDispatch>();
   
   // 现在调用fetchToken就不会有类型错误了
   onClick={() => {
     dispatch(fetchToken("username", "password"));
   }}
   

4. （可选）为Thunk Action添加明确类型
   给fetchToken的返回值指定ThunkAction类型，让类型检查更严格：

   import { ThunkAction } from 'redux-thunk';
   import { AnyAction } from 'redux';
   import { RootState, AppDispatch } from './path/to/store';
   import { fetchTokenStart, fetchTokenSucceed, fetchTokenFailure } from './path/to/your/actionTypes';
   
   // 修正参数类型：用小写string而非大写String（大写是包装对象，不推荐在TS中使用）
   export function fetchToken(username: string, password: string): ThunkAction<Promise<void>, RootState, unknown, AnyAction> {
     return async (dispatch: AppDispatch) => {
       dispatch(fetchTokenStart());
       try {
         const response = await Axios.post("login", {
           username,
           password,
         });
         dispatch(fetchTokenSucceed(response.data));
       } catch (error) {
         const errResponse = error as errorResponse;
         dispatch(fetchTokenFailure(errResponse.response.data));
       }
     };
   }
   

额外提示： #

• TypeScript中优先使用小写的string类型，而非大写的String（后者是JavaScript的包装对象类型，几乎不会在业务代码中用到）。
• 确保errorResponse类型已经正确定义，避免类型断言带来的潜在问题。

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