解决redux-thunk模块找不到错误：无法解析'redux-thunk/extend-redux'

问题根源 #

你当前安装的redux-thunk版本是v2.4.2，而redux-thunk/extend-redux这个模块是redux-thunk v3.x版本才新增的类型扩展入口，v2.x版本中不存在该文件，因此触发了模块找不到的错误。同时v2.x的类型处理逻辑与v3.x不同，之前的ThunkAction类型不兼容问题需要用对应版本的方式解决。

两种解决方案 #

方案一：升级到redux-thunk v3.x（推荐） #

直接升级到最新版本，即可支持extend-redux的导入，同时完善类型系统：

1. 卸载旧版本并安装最新版：

npm uninstall redux-thunk && npm install redux-thunk

2. 保留import 'redux-thunk/extend-redux'语句，此时类型错误和模块找不到的问题都会解决。
3. 确保你的store配置中正确使用thunk中间件（v3.x用法与v2.x兼容，比如applyMiddleware(thunk)依然有效）。

方案二：在v2.x版本下修复类型错误（不升级） #

如果不想升级版本，可删除import 'redux-thunk/extend-redux'，通过手动配置类型解决原有的类型不兼容问题：

1. 删除action.ts中的import 'redux-thunk/extend-redux';语句。
2. 在store定义文件（如store.ts）中添加自定义Dispatch类型：

import { ThunkDispatch } from 'redux-thunk';
import { RootState } from '.';
import { WeatherAction } from './types';

// 定义支持Thunk的Dispatch类型
export type AppDispatch = ThunkDispatch<RootState, null, WeatherAction>;

3. 在组件中使用useDispatch时指定该自定义类型：

import { useDispatch } from 'react-redux';
import { AppDispatch } from './store';
import { getWeather } from './actions';

const dispatch = useDispatch<AppDispatch>();
// 此时调用dispatch(getWeather('xxx'))不会再出现类型错误

额外推荐：使用Redux Toolkit简化配置 #

若想彻底避免这类类型和中间件配置问题，推荐使用官方推荐的Redux Toolkit：

1. 安装Redux Toolkit：

npm install @reduxjs/toolkit react-redux

2. 用configureStore创建store，它会自动集成thunk中间件，且dispatch默认支持thunk actions，无需手动配置类型：

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

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

// 自动生成RootState和AppDispatch类型
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

3. 在组件中使用时，直接导入AppDispatch即可：

import { useDispatch } from 'react-redux';
import { AppDispatch } from './store';

const dispatch = useDispatch<AppDispatch>();
dispatch(getWeather('123456')); // 无类型错误

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