reactjs - Typescript - 在 Redux 中定义初始状态时设置 null 属性的类型

标签 reactjs typescript redux react-redux

在 Redux 中定义了 reducer 的初始状态后,我想获取初始状态的类型,以便在我向状态添加任何属性时它会自动更新。

这是我对初始状态的定义

let initialState = {
  food: {
    data: null,
    fetching: false,
    fetched: false,
    error: null
  }
}

然后我从这个状态中提取类型定义

export type StoreState = typeof initialState;

food.data 属性应该是Food 类型,其定义如下:

export interface Food {
  fdcId: number
  description: string
  nutrients: Array<Nutrient>
}

export interface Nutrient {
  name: string
  unitName: string
  amount: number
}

默认情况下,food.data 被定义为 never 类型,在初始状态下分配 null 时。这样,当我想访问它的属性 nutrients 时,我收到一条错误消息,提示 Property 'nutrients' does not exist on type 'never'

null as Food 定义 food.data 将不起作用,因为这也会产生错误。

如果我将 food.data 定义为 {} as Food,那么我将无法在 reducer 。

那么我的问题是,我如何定义属性 food.data 以便当我获得初始状态的 typeof 时它知道 food .dataFood 类型,这样 food.data 仍然可以是 null

最佳答案

通过将数据定义为 nullFood,我让它工作了

let initialState = {
  food: {
    data: null as (null | Food),
    fetching: false,
    fetched: false,
    error: null
  },
}

关于reactjs - Typescript - 在 Redux 中定义初始状态时设置 null 属性的类型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59224162/

相关文章:

javascript - Redux - 在哪里准备数据

javascript - 如何隐藏 <p> 标签中的特殊符号

html - 有条件地更改 Angular 组件的 CSS

javascript - 自动完成从 API 获取数据

react-native - 从 API 获取错误地在 Android 上返回旧的 "cached"数据,在 iOS 上返回最新数据

c# - 在 Blazor 页面中渲染 react 组件

javascript - 使用不同的参数重新渲染相同的组件

reactjs - 如何解决 React 应用程序中 axios 响应的 TypeScript 错误

angular - 当用户单击 mat-calendar 中的月份导航时,如何检索月份和年份值?

javascript - 对象传播符号如何转换 react redux Prop ?