如何修复 redux-toolkit 中的打字稿错误？

Question

我正在使用 typescript 编写 redux-toolkit 教程。但我是打字初学者。

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

这是一条错误消息。 : TS2322: 类型 'number' 不可分配给类型 'void | State | WritableDraft'.

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

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

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

是一个函数，return是一个数字。解决方案是在 return 值之前添加 void 运算符以将其设置为 undefined.

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

Answer 2

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

Redux Toolkit 允许您 return 一个新状态（在回答这个问题时键入 State | WritableDraft<State>，或在较新版本的 RTK 中键入 State | Draft<State>）或修改草稿state 而不是 return 任何东西（输入 void）。你得到一个 Typescript 错误，因为 returning number 既不是也不是这些。

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

这三个功能都有效。从最少到最详细排序：

您可以直接使用 addition assignment operator +=

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

您可以使用 assignment operator =

state.value

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

（不推荐）您可以 return 一个全新的状态。我在 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，因此您不必执行此操作。但是，如果您选择 return 一个新状态，那么它必须是一个完整的状态。

如何修复 redux-toolkit 中的打字稿错误？

How to fix typescript error in redux-toolkit?

typescript

redux

redux-toolkit