PayloadAction 的 Typescript 类型

Question

我正在createSlice这样使用：

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

const initialState = {} as Order;

const order = createSlice({
  name: 'order',
  initialState,
  reducers: {
    setOrder: (_state, { payload }: PayloadAction<Order | null>) => payload,
  },
});

我收到以下错误：

Type 'SalesOrder | null' is not assignable to type 'void | SalesOrder | WritableDraft<SalesOrder>'.
  Type 'null' is not assignable to type 'void | SalesOrder | WritableDraft<SalesOrder>'.ts(2322)

当我将鼠标悬停在该函数上时，我得到以下类型：

function(_state: WritableDraft<SalesOrder>, { payload }: PayloadAction<SalesOrder | null>): SalesOrder | null

我该如何解决？我希望该值为Order或null。

Answer 1

我现在无法测试这一点，但您的错误可能来自以下行：

const initialState = {} 作为订单；

你基本上是告诉打字稿，initialState变量必须是一个Order（并通过传递一个空对象来欺骗编译器），然后在你的reducer中你想将它设置为Order或null，打字稿会告诉你它不能为 null 或 Order，它必须是一个订单。

你应该试试：

const 初始状态： null | 订单 = 空

并告诉我这件事

编辑：我在redux 工具包文档中找到了解决方案，但它并不直观！

第一步 ：

type OrderState = Order | null;

到目前为止，一切都很好。我们已经定义了您所在州应该具有的类型。

现在，对于混乱的部分，当您实际创建初始状态常量时，打字稿会将其类型缩小为其值，无论您告诉它是什么类型。

所以当你写这个时：

const initialState: OrderState = null

Typescript 将理解“此常量的类型为 null”，因此您的创建切片函数将理解“状态的类型为 null”。

解决方法是将正确的类型转换为 null 值：

const initialState = null as OrderState

我知道两个initialState 声明应该产生相同的类型推断，但显然不是这样工作的。

这样做，这里的这一行：

setOrder: (_state, { payload }: PayloadAction<OrderState>) => payload,

不会输出错误，因为代码的每个部分都知道什么类型。

顺便说一下，将一个空对象垃圾分配给initialState变量并不是一个好主意，因为你的状态永远不会是{}类型。它要么是一个订单，意味着有某物，要么是 null，意味着没有订单。

我强烈建议阅读redux 工具包文档中的“typescript 的使用”部分，因为我认为这不会是您最后一个 typescript/redux 奇怪的错误。我已经吃过很多了！