如何使用带有 Typescript 的 useSelector 访问属性？答案

【问题标题】：How do I access properties using useSelector with Typescript?如何使用带有 Typescript 的 useSelector 访问属性？
【发布时间】：2021-08-24 01:27:32
【问题描述】：

我正在尝试从该州访问联系人，但我总是获得整个州。

我尝试过解构，但这也不起作用？

我的切片包含工具包和 thunk。

export interface Contact {
  name: string;
  phone: string;
  id: number;
}
export interface contactSliceState {
  contacts: Contact[];
  status: "idle" | "pending" | "succeeded" | "failed";
  loading: boolean;
}

const contacts: Contact[] = useSelector<contactSliceState, Contact[]>(  
    (state) => state.contacts  
  );

console.log("contacts", contacts)

contacts:  
0: {name: "John", phone: "123012", id: 1}
1: {name: "Bill", phone: "653722", id: 2}
2: {name: "Tom", phone: "874932", id: 3}
loading: false
status: "succeeded"

【问题讨论】：

contacts 不是数组吗？
在 useSelector 函数中执行 console.log(state) 来检查状态的真实形状，因为这里没有加起来

标签： reactjs typescript redux redux-thunk

【解决方案1】：

您似乎向 Typescript 编译器提供了有关您的状态形状的错误信息。由于contacts 只是一个切片，您应该提供root 状态的形状作为useSelector 的第一个泛型。然后我相信它会更有意义：

const contacts = useSelector<RootState, Contact[]>(  
    (state) => state.contacts.contacts
  );

请注意，我所说的“根”状态只是包括所有切片的顶级状态（我假设 contacts 是顶级状态的键。

【讨论】：

我将此标记为答案 - 但是，现在我的联系人在初始渲染时未定义。不知道为什么它没有捕捉到 intialState 但这是另一个问题。