React+TypeScript中测试redux-thunk异步action更新store时的TypeScript类型错误解决方法

这个错误的核心原因是：你自定义的testStore返回的Redux Store实例，其dispatch方法的类型还是Redux默认的仅支持普通Action对象的类型，并没有适配redux-thunk的ThunkAction类型。下面是具体的修复方案：

1. 修正testStore的类型定义 #

首先需要给你的测试工具函数指定正确的Store类型，让它的dispatch方法支持Thunk异步Action。修改你的测试store工具文件：

import { createStore, applyMiddleware, Store } from 'redux';
import reduxThunk, { ThunkDispatch } from 'redux-thunk';
import rootReducer from '../reducers'; // 替换成你的rootReducer实际路径
import State from '../state';
import Action from '../actions/types';

// 定义支持Thunk的Dispatch类型
type AppDispatch = ThunkDispatch<State, void, Action>;
// 扩展Store类型，替换默认的dispatch为AppDispatch
type AppStore = Omit<Store<State, Action>, 'dispatch'> & {
  dispatch: AppDispatch;
};

export const testStore = (initialState: State = { posts: [] }): AppStore => {
  const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);
  // 用类型断言告诉TS这是我们定义的AppStore类型
  const store = createStoreWithMiddleware(rootReducer, initialState) as AppStore;
  return store;
};

2. 确保异步Action的类型正确 #

检查你的fetchPosts action是否正确标注了ThunkAction返回类型，比如：

import { ThunkAction } from 'redux-thunk';
import State from '../state';
import Action from '../actions/types';
import axios from 'axios';

export const fetchPosts = (): ThunkAction<Promise<void>, State, void, Action> => {
  return async (dispatch) => {
    try {
      const response = await axios.get('/api/posts');
      dispatch({
        type: 'FETCH_POSTS_SUCCESS', // 替换成你的实际action type
        payload: response.data
      });
    } catch (error) {
      // 按需添加错误处理逻辑
    }
  };
};

3. 测试文件无需额外修改 #

现在你在测试文件中执行await store.dispatch(fetchPosts());时，TypeScript就能正确识别fetchPosts是一个ThunkAction，而store.dispatch也支持这种类型，不会再抛出类型不匹配的错误。

原理说明 #

Redux默认的Store类型中，dispatch方法只接受符合Action接口（必须包含type属性）的普通对象。而redux-thunk扩展了dispatch的能力，让它可以接受返回函数的ThunkAction。通过自定义AppStore类型，我们替换了默认的dispatch类型，让它适配ThunkAction的调用签名，从而解决类型不匹配的问题。

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