Redux Toolkit 中 AsyncThunkAction 类型不匹配问题的分析与解决

在使用 Redux Toolkit 进行状态管理时，开发者可能会遇到一个常见的类型错误："Argument of type 'AsyncThunkAction<{ id: number; }, void, AsyncThunkConfig>' is not assignable to parameter of type 'UnknownAction'"。这个问题通常出现在 TypeScript 环境下，当开发者尝试使用自定义类型与 Redux Toolkit 的异步操作结合时。

问题现象

开发者在使用 createAsyncThunk 创建异步 action 后，在 dispatch 该 action 时会遇到类型不匹配的错误。具体表现为 TypeScript 编译器提示 AsyncThunkAction 类型无法赋值给 UnknownAction 类型。

根本原因

这个问题的根源在于 Redux Toolkit 的类型系统与 React-Redux 的类型定义之间的不匹配。当开发者没有正确使用 Redux Toolkit 提供的预定义类型钩子时，TypeScript 无法正确推断 action 的类型。

解决方案

1. 使用预定义的类型钩子

Redux Toolkit 提供了一套预定义的类型钩子，应该优先使用这些钩子而非手动定义类型：

import { useAppDispatch, useAppSelector } from './hooks'

// 在组件中使用
const dispatch = useAppDispatch()
const tabs = useAppSelector(state => state.tabs)

2. 正确配置 store 类型

避免手动为 store 添加类型注解，而是让 Redux Toolkit 自动推断类型：

// 正确做法
export const store = configureStore({
  reducer: {
    tabs: tabsSlice.reducer
  }
})

// 错误做法（不要这样做）
export const store: Store<{ tabs: StateINF }> = configureStore({
  reducer: {
    tabs: tabsSlice.reducer
  }
})

3. 完整示例代码

以下是一个正确使用 Redux Toolkit 和 TypeScript 的完整示例：

// hooks.ts
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import type { AppDispatch, RootState } from './store'

export const useAppDispatch: () => AppDispatch = useDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

// store.ts
import { configureStore } from '@reduxjs/toolkit'
import tabsReducer from './tabsSlice'

export const store = configureStore({
  reducer: {
    tabs: tabsReducer
  }
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

// tabsSlice.ts
import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit'

interface StateINF {
  selectedTabId: number
  isDragging: boolean
  value: any[]
}

const initialState: StateINF = {
  selectedTabId: 0,
  isDragging: false,
  value: []
}

export const addTab = createAsyncThunk('tabs/addTab', async (): Promise<{ id: number }> => {
  return { id: 1 }
})

const tabsSlice = createSlice({
  name: 'tabs',
  initialState,
  reducers: {
    changeTab(state) {
      state.value = []
    },
    delTab(state) {
      state.value = []
    }
  },
  extraReducers(builder) {
    builder.addCase(addTab.fulfilled, (state, action: PayloadAction<{ id: number }>) => {
      console.log(state, action)
    })
  }
})

export const { changeTab, delTab } = tabsSlice.actions
export default tabsSlice.reducer

最佳实践建议

1. 避免手动类型断言：尽量减少使用 as 进行类型断言，让 TypeScript 自动推断类型
2. 统一类型定义：将 store 的类型定义集中管理，避免分散在各处
3. 利用工具类型：充分利用 Redux Toolkit 提供的工具类型如 PayloadAction 等
4. 保持依赖版本同步：确保 @reduxjs/toolkit 和 react-redux 的版本兼容

通过遵循这些最佳实践，开发者可以避免大多数与类型相关的 Redux Toolkit 问题，并构建出类型安全的状态管理系统。