Redux Thunk TypeScript技术问题：useEffect中dispatch Thunk报错类型不兼容

嘿，我来帮你搞定这个问题！你遇到的这个TypeScript类型报错，本质是因为默认的Redux dispatch只认识普通Action对象，而你的filterServices返回的是Thunk函数，类型不匹配。另外你的Thunk里还有两处逻辑错误，咱们一步步来修复：

一、先修正TypeScript的dispatch类型配置 #

Redux默认的useDispatch返回的是普通Dispatch<AnyAction>类型，没法处理Thunk函数。我们需要给dispatch加上Thunk支持的类型：

如果你用Redux Toolkit（官方推荐） #

在你的store配置文件里定义自定义的dispatch类型和hooks：

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';

export const store = configureStore({
  reducer: rootReducer,
});

// 导出store的类型
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

// 在单独的hooks文件（比如hooks.ts）里导出自定义useDispatch
import { useDispatch } from 'react-redux';

export const useAppDispatch = () => useDispatch<AppDispatch>();

然后在组件里用这个自定义的hooks替代原生useDispatch：

import { useAppDispatch } from './path-to-your-hooks-file';

// ...

const dispatch = useAppDispatch();

useEffect(() => {
  dispatch(filterServices());
}, []);

如果你手动配置Redux（不用Toolkit） #

需要明确给store加上Thunk中间件的类型：

import { createStore, applyMiddleware } from 'redux';
import thunk, { ThunkMiddleware } from 'redux-thunk';
import rootReducer from './reducers';
import { Action, IRootState } from './types';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk as ThunkMiddleware<IRootState, Action>)
);

export type AppDispatch = typeof store.dispatch;

同样在组件里用useDispatch<AppDispatch>()来获取类型正确的dispatch。

二、修复Thunk函数里的逻辑错误 #

你的filterServices里有两个明显问题：

1. getState是函数，必须调用才能拿到state，你之前写的getState.filters是错误的
2. 用map来过滤数组完全不对——map是转换元素，应该用filter来筛选符合条件的元素

修正后的Thunk代码：

export const filterServices = () => {
  return (dispatch: ThunkDispatch<IRootState, void, Action>, getState: () => IRootState) => {
    // 调用getState()获取当前state
    const { filters, services } = getState();
    const { category, subcategory } = filters;
    // 拷贝原数组，避免直接修改state里的数据
    let result = [...services.services];

    // 按分类过滤
    if (category !== 'All categories') {
      result = result.filter(e => e.category === category);
    }

    // 按子分类过滤
    if (subcategory !== 'All Subcategories') {
      result = result.filter(e => e.subcategory === subcategory);
    }

    dispatch(getfilteringServices(result));
  };
};

三、最后验证 #

把上面的配置和代码修正后，TypeScript的类型错误应该会消失，同时数组过滤的逻辑也能正常工作了——现在它会正确筛选出符合分类/子分类的服务数据，而不是返回布尔值数组。

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