TypeScript中Redux Toolkit异步thunk getState访问切片状态报错解决

默认情况下，createAsyncThunk生成的异步动作中，getState方法的返回值没有绑定项目全局Redux Store的状态结构类型，会被TypeScript推导为unknown类型，因此直接读取LoginPageReducer下的token属性时，会触发「Object is of type 'unknown'」的类型校验错误。

• 第一步：定义全局根状态类型
  在项目的store配置文件中，从实际的store实例上推导全局状态的类型，确保类型结构和实际存储的内容完全一致，示例代码：

  // store.ts
  import { configureStore } from '@reduxjs/toolkit'
  import loginPageReducer from './loginSlice' // 你的登录切片reducer
  
  // 实例化全局store
  export const store = configureStore({
    reducer: {
      LoginPageReducer: loginPageReducer
    }
  })
  
  // 从store的getState方法上推导根状态类型，供全局复用
  export type RootState = ReturnType<typeof store.getState>
  

• 第二步：给createAsyncThunk传入明确的类型泛型
  createAsyncThunk支持第三个泛型配置位，专门用来指定thunkAPI对象中各方法的返回类型，将第一步定义的RootState传入这个配置位后，getState的返回值就会被推导为正确的全局状态类型，不会再出现unknown报错。
  修正后的业务代码示例：

  import type { RootState } from '../store'
  
  export const redirectUser = createAsyncThunk<
    // 第一个泛型位：thunk执行成功后返回的结果类型，无返回值可设为void
    void,
    // 第二个泛型位：异步动作接收的入参类型，也就是你传入的id参数类型
    string,
    // 第三个泛型位：thunkAPI的类型配置，这里指定状态类型
    { state: RootState }
  >(
    "login/redirectUser",
    async (id, { getState, requestId }) => {
      // 此时getState()已经自动识别为RootState类型，可正常访问嵌套属性
      const token = getState().LoginPageReducer.token;
      // 后续业务逻辑...
    }
  )
  

• 不要使用as any之类的强制类型断言绕过类型检查，这种写法会让TS完全失去对状态结构的校验能力，后续修改切片结构时很容易出现运行时错误。
• 确保RootState类型是从实际的store实例上推导出来的，不要手写和实际reducer结构不匹配的类型，否则会出现属性不存在的报错。
• 项目中所有用到getState的createAsyncThunk逻辑，都可以复用同一个RootState类型，不需要重复定义状态结构。

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