在组件级别使用 Typescript 初始化 redux 状态类型检查

Question

我使用 RTK Query 和 Typescript 编写 React Native 应用程序进行状态管理，我有一个主切片，它包含 3 个深度级别的公司对象本身和加载状态等其他内容。如果用户成功登录，我正在获取公司信息从远程并作为 currentCompany 分派到主切片存储。所以用户不能在没有公司的情况下使用应用程序。但是当我初始化 redux store.Initial 状态时：


interface MainSlice {
  loading: number;
  isLoggedIn: boolean;
  currentCompany: Company | undefined; 
#If I use only company here I have to give dummy company for initial state which is not good practice.
}


const initialState: MainSlice = {
  loading: 0,
  isLoggedIn: false,
  currentCompany: undefined, #As I mentioned I had to define current company as undefined. If a define a dummy Company here because of company type requires a lot attributes I don't want to do that.
};

当我像那样使用主切片时，我总是必须在组件级别检查公司是否未定义。所以这很累人。 Typescript error ss

有什么方法可以避免 Typescript 错误或正确的初始状态吗situation.I 想定义肯定存在的公司

Answer 1

有几件事可以提供帮助，不幸的是没有灵丹妙药。

首先，请使用currentCompany: Company | null;代替undefined。 null 是正确的选择，如果某些东西是故意的、明确的空的或丢失的——这在你的情况下是正确的。您知道公司数据稍后会保存，但一开始并不存在。参见 What is the difference between null and undefined in JavaScript?
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator 在使用 null/undefined 和回退值时很有用。示例：currentCompany?.id ?? 'fallback-id-here'
您可以在读取状态后进行类型断言： (currentCompany as Company).id
如果只有一个登录用户和一个公司，您可以将公司状态移动到它自己的切片并更好地为初始状态建模：
- interface CompanySlice { id: number, name: string };
- const companyInitialState: CompanySlice = { id: 0, name: '' }; - 使用具有相同数据类型的值，但允许您检测它是否为空或无效。在此示例中，id 需要大于 0， 但您始终可以访问它而不会在组件 中出现打字稿警告。将“虚拟”公司作为初始状态本身并没有错。您可以编写一个选择器来推断公司是否已保存：const hasCompany = state => state.company.id > 0.

在组件级别使用 Typescript 初始化 redux 状态类型检查

Initializing redux state type checking with Typescript on component level

typescript

react-native

redux

rtk

rtk-query