Redux Toolkit + TypeScript 问题：state参数类型为unknown

检查Slice的类型定义 #

确保slice创建时正确定义初始状态的类型，让TypeScript能准确推断state结构：

// 示例：定义todo slice的类型
interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

interface TodoState {
  list: Todo[];
  loading: boolean;
}

// 显式指定初始状态的类型
const initialState: TodoState = {
  list: [],
  loading: false,
};

const todoSlice = createSlice({
  name: 'todos',
  initialState,
  reducers: {
    addTodo: (state, action: PayloadAction<Todo>) => {
      state.list.push(action.payload);
    },
    // 其他reducer逻辑
  },
});

若初始状态未显式指定类型，TypeScript可能无法正确推导，导致后续取state时类型为unknown。

确认RootState的正确性 #

hooks.ts中的RootState必须从store的getState方法自动推导，禁止手动定义：

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

export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

在store.ts中，通过ReturnType自动生成RootState类型：

// store.ts
import { configureStore } from '@reduxjs/toolkit';
import todoReducer from './features/todo/todoSlice';

export const store = configureStore({
  reducer: {
    todos: todoReducer,
    // 其他reducer
  },
});

// 关键：从store的getState方法推导RootState
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

手动定义RootState极易与实际store结构不符，这是类型unknown的常见原因。

规范useAppSelector的使用 #

使用useAppSelector时，不要手动给state指定any或unknown类型：

// 正确用法
const todos = useAppSelector(state => state.todos.list);

// 错误用法：会覆盖TypedUseSelectorHook的类型
// const todos = useAppSelector((state: any) => state.todos.list);

手动指定错误类型会让useAppSelector失去类型推导能力，返回值变为unknown。

清理TypeScript缓存 #

TypeScript的缓存可能导致类型推断异常，可重启VS Code，或执行命令清除缓存：

tsc --clearCache

检查依赖版本 #

确保@reduxjs/toolkit和react-redux为最新版本，旧版本对TypeScript的支持存在缺陷：

npm install @reduxjs/toolkit@latest react-redux@latest

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