React+Redux：添加LogRocket中间件后调用dispatch触发类型错误

This error pops up because LogRocket's Redux middleware alters the inferred type of your store's dispatch function, breaking compatibility with AsyncThunkAction types. Here's how to fix it step by step:

1. Correct Your AppDispatch Type Definition #

The core issue is that adding LogRocket's middleware makes the auto-inferred typeof store.dispatch lose support for thunk actions. Instead, explicitly define AppDispatch as a ThunkDispatch type to ensure it works with both regular actions and async thunks.

Update your store.ts:

import { Action, AnyAction, ThunkDispatch } from 'redux'
import thunk, { ThunkAction } from 'redux-thunk'
import { configureStore } from '@reduxjs/toolkit'
import mySlice from './mySlice'
import LogRocket from 'logrocket'

const configurePortalStore = (preloadedState?: any) => {
  const store = configureStore({
    reducer: {
      mySlice: mySlice,
    },
    preloadedState,
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware({
        serializableCheck: {
          ignoredActions: ['myAction'],
          ignoredActionPaths: ['meta.arg', 'payload.meta.arg'],
          ignoreState: true,
        },
      })
      // Important: getDefaultMiddleware already includes thunk by default!
      .concat(LogRocket.reduxMiddleware()),
  })
  return store
}

export const store = configurePortalStore()

// Explicitly define AppDispatch to support thunk actions
export type AppDispatch = ThunkDispatch<RootState, unknown, AnyAction>
export type RootState = ReturnType<typeof store.getState>
export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  RootState,
  unknown,
  Action<string>
>

Key Note: You don't need to manually add thunkMiddleware to the middleware array—Redux Toolkit's getDefaultMiddleware includes it out of the box. Duplicating it can cause unnecessary type confusion.

2. Simplify createAsyncThunk Type Parameters #

You don't need to manually specify { dispatch: AppDispatch } in your createAsyncThunk generic arguments. The type system can infer this from your AppDispatch and RootState definitions automatically.

Update your mySlice.tsx:

import axios from 'axios'
import { createAsyncThunk } from '@reduxjs/toolkit'
import { AppDispatch, RootState } from './store'

export const api = () => axios.create({
  baseURL: "myURL",
  timeout: 1000,
  headers: {
    Authorization: "myToken",
  },
});

// Let types infer from your store's definitions instead of manual overrides
export const myPostRequest = createAsyncThunk(
  "mySlice/myPostRequest", 
  async (payload, thunkAPI) => {
  return api()
    .post("/myRequest", payload)
    .then((res) => res.data)
    .catch((error) => {
      if (error.response.data.tokenExpired) {
        thunkAPI.dispatch(
          myRefreshTokenFunc(() => 
            thunkAPI.dispatch(myPostRequest(payload))
          )
        );
      }
      return error.response.data;
    });
});

If you do need explicit context typing (though inference should work), use this:

export const myPostRequest = createAsyncThunk<
  any,
  any,
  { state: RootState; dispatch: AppDispatch }
>(/* ... */)

3. Optional: Update LogRocket to the Latest Version #

Older versions of LogRocket may have incomplete TypeScript definitions that don't play well with Redux Toolkit. Updating to the latest version can resolve underlying type compatibility issues.

内容的提问来源于stack exchange，提问作者ariel-walley