如何修复 redux-toolkit 中的 typescript 错误？

Question

我正在用 typescript 做一个 redux-toolkit 教程。但我是打字稿初学者。

我不知道这里有什么问题。请给我你的见解。

这是一条错误消息。 : TS2322: 类型 'number' 不能分配给类型 'void |状态 |可写草稿'。

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

type State = {
  value: number
}
const increment: CaseReducer<State,PayloadAction<number>> = (state, action) => state.value + action.payload; // error line

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    increment,
    decrement: state => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    },
  },
})

export const {increment, decrement, incrementByAmount} = counterSlice.actions;

export default counterSlice.reducer;

Answer 1

没有大括号的箭头函数是implied return。所以你返回state.value + action.payload，这是一个number。

Redux Toolkit 允许您返回新状态（在回答此问题时输入 State | WritableDraft<State>，或在较新版本的 RTK 中输入 State | Draft<State>）或修改草稿状态而不返回任何内容（输入 void )。您会收到 Typescript 错误，因为返回 number 既不是也不是这些。

您可能想要修改草稿状态，因此您需要在函数体周围加上花括号，这样您就不会返回任何内容。

---

这三个函数都是有效的。从最详细到最详细排序：

1. 您可以使用addition assignment operator += 直接增加值

const increment: CaseReducer<State,PayloadAction<number>> = (state, action) => {
  state.value += action.payload;
}

1. 您可以使用assignment operator = 为state.value 属性分配一个新值

const increment: CaseReducer<State,PayloadAction<number>> = (state, action) => {
  state.value = state.value + action.payload;
}

1. （不推荐）您可以返回一个全新的状态。我在 return an object 的大括号周围使用括号，属性为 value。

const increment: CaseReducer<State,PayloadAction<number>> = (state, action) => ({
  value: state.value + action.payload
});

如果有 value 以外的属性，您需要像 {...state, value: newValue } 一样复制它们，这就是您在传统 Redux reducer 中看到的。 Redux Toolkit 使选项 1 和 2 可用，因此您不必这样做。但是如果你选择返回一个新的状态，那么它必须是一个完整的状态。

Answer 2

CaseReducer 返回值必须是void | State | WritableDraft 而你的表达式：

(state, action) => state.value + action.payload

是一个返回数字的函数。解决方法是在返回值前加上void运算符，设置为undefined。

(state, action) => void (state.value += action.payload)