使用react-redux的useSelector时报错DefaultRootState无meals属性如何解决

该TypeScript报错本质是React-Redux默认没有你的Redux根状态的类型定义，内置的DefaultRootState类型中不存在你自定义的meals字段，因此访问state.meals时类型校验失败。

• 第一步：导出根状态类型
  在你配置Redux Store的文件（通常为store.ts）中导出根状态类型，示例如下：

// store.ts 示例
import { configureStore } from '@reduxjs/toolkit'
import mealsReducer from './mealsSlice'

export const store = configureStore({
  reducer: {
    meals: mealsReducer, // 你自己定义的meals reducer
  },
})

// 导出根状态类型
export type RootState = ReturnType<typeof store.getState>
// 可选：导出dispatch类型方便后续使用
export type AppDispatch = typeof store.dispatch

• 第二步：给useSelector指定类型，两种方案可选：
  方案1：单次使用时直接声明state类型
  把你原有代码调整为如下写法即可：

  // 从store文件导入你定义的RootState
  import type { RootState } from './store'
  
  const favoriteMeals = useSelector((state: RootState) => state.meals.favoritsMeals);
  const renderMealItem = (itemData) => {
    const isFavorite = favoriteMeals.find(
      (meal) => meal.id === itemData.item.id
    );
  

  方案2（更推荐长期使用）：全局封装带类型的自定义钩子
  在store.ts中追加如下代码，封装带类型的useSelector和useDispatch：

  import { useDispatch, useSelector } from 'react-redux'
  import type { TypedUseSelectorHook } from 'react-redux'
  
  export const useAppDispatch: () => AppDispatch = useDispatch
  export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
  

  后续在所有组件中直接用useAppSelector替代原生的useSelector即可，无需每次重复声明类型：

  import { useAppSelector } from './store'
  
  const favoriteMeals = useAppSelector((state) => state.meals.favoritsMeals);
  

• 额外注意项：检查你的meals reducer中定义的收藏列表字段名是否正确，你代码中的favoritsMeals存在拼写错误的可能，正确拼写应为favoriteMeals，如果字段名不匹配也会触发属性不存在的报错。

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