Redux-Toolkit中useDispatch.withTypes报错：不是函数的问题求助

问题场景 #

在学习Redux-Toolkit开发时，调用dispatch触发了以下错误：

react_redux__WEBPACK_IMPORTED_MODULE_0__.useDispatch.withTypes is not a function

相关代码文件如下：

authSlice.ts #

import { createAppSlice } from "@/lib/createAppSlice";
import type { PayloadAction } from "@reduxjs/toolkit";

export interface IAuthState {
  authState: boolean;
}

const initialState: IAuthState = {
  authState: false,
};

export const authSlice = createAppSlice({
  name: "auth",
  initialState,
  reducers: {
    setAuthState: (state, action: PayloadAction<boolean>) => {
      state.authState = action.payload;
    },
  },
});

export const { setAuthState } = authSlice.actions;
export const authReducer = authSlice.reducer;

store.ts #

import type { Action, ThunkAction } from "@reduxjs/toolkit";
import { combineSlices, configureStore } from "@reduxjs/toolkit";
import { counterSlice } from "./features/counter/counterSlice";
import { quotesApiSlice } from "./features/quotes/quotesApiSlice";
import { authSlice } from "./features/auth/authSlice";

const rootReducer = combineSlices(counterSlice, quotesApiSlice, authSlice);

export type RootState = ReturnType<typeof rootReducer>;

export const makeStore = () => {
  return configureStore({
    reducer: rootReducer,
    middleware: (getDefaultMiddleware) => {
      return getDefaultMiddleware().concat(quotesApiSlice.middleware);
    },
  });
};

export type AppStore = ReturnType<typeof makeStore>;
export type AppDispatch = AppStore["dispatch"];
export type AppThunk<ThunkReturnType = void> = ThunkAction<
  ThunkReturnType,
  RootState,
  unknown,
  Action
>;

hooks.ts #

// This file serves as a central hub for re-exporting pre-typed Redux hooks.
import { useDispatch, useSelector, useStore } from "react-redux";
import type { AppDispatch, AppStore, RootState } from "./store";

// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
export const useAppSelector = useSelector.withTypes<RootState>();
export const useAppStore = useStore.withTypes<AppStore>();

authUpdater.tsx #

import React from "react";
import { setAuthState } from "@/lib/features/auth/authSlice";
import { useAppDispatch } from "@/lib/hooks";

export const AuthUpdater = () => {
  const dispatch = useAppDispatch();
  return (
    <div>
      <button onClick={() => dispatch(setAuthState(true))}>Log in</button>
      <button onClick={() => dispatch(setAuthState(false))}>Log out</button>
    </div>
  );
};

问题原因 #

withTypes是React-Redux v9.x版本新增的类型扩展方法，你当前使用的React-Redux版本低于v9.x，导致该方法不存在。

解决方案 #

根据你的依赖版本，选择以下两种方式之一：

方式1：升级到React-Redux v9.x+ #

如果允许升级依赖，执行对应命令：

npm install react-redux@latest
# 或
yarn add react-redux@latest
# 或
pnpm add react-redux@latest

升级后，当前的withTypes写法可正常使用。

方式2：兼容低版本写法（适用于React-Redux v8.x及以下） #

修改hooks.ts文件，替换withTypes的写法：

import { useDispatch, useSelector, useStore } from "react-redux";
import type { AppDispatch, AppStore, RootState } from "./store";

export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector = useSelector<RootState>;
export const useAppStore = () => useStore<AppStore>();

修改后，组件中调用useAppDispatch和useAppSelector的方式保持不变，即可正常运行。

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