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

我认为您实际上应该设置初始状态的值，而不是将空对象断言为Order 类型。这里我只是添加了随机属性，因为您没有包含类型Order（只需将其更改为实际值）。除此之外，我将initialState 设置为Order 或null 类型。

type InitialOrderState = { Order | null };

const initialState: InitialOrderState = {
    orderId: "",
    status: "",
};

const order = createSlice({
  name: 'order',
  initialState,
  reducers: {
    setOrder: (state, { payload }: PayloadAction<InitialOrderState>) => payload,
  },
});

Answer 2

我现在无法对此进行测试，但您的错误可能来自以下线路：

const initialState = {} as Order;

您基本上是在告诉 typescript，initialState 变量必须是一个 Order（并通过传递一个空对象来欺骗编译器），然后在您的 reducer 中，您希望将其设为 Order 或 null，typescript 将告诉你它不能为 null 或 Order，它必须是一个 order。

你应该试试：

常量初始状态：空 |订单 = null

然后告诉我吧?

编辑：我在redux toolkit docs 中找到了解决方案，但并不直观！

第一步：

type OrderState = Order | null;

到目前为止一切顺利。我们已经定义了你的状态应该有的类型。

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

所以当你写这个时：

const initialState: OrderState = null

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

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

const initialState = null as OrderState

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

这样做，这一行在这里：

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

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

顺便说一下，将一个空对象的字面值分配给 initialState 变量并不是一个好主意，因为您的状态永远不会是 {} 类型。它要么是一个 order 表示有东西，要么是 null 表示没有 order。

我强烈建议阅读redux toolkit docs 的“使用 typescript”部分，因为我认为这不会是你最后一个 typescript/redux 奇怪的错误。我有很多！