如何修复redux工具包中的打字错误？

Question

我正在用typescript做一个redux工具包教程。但我是个打字新手。

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

这是一条错误消息：TS2322：类型“number”不可分配给类型“void | State | writableddraft”。

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

CaseReduce er返回值必须是val|State|Writable草稿而您的表达式：

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

是一个返回数字的函数。解决方案是在返回值之前添加void操作符，将其设置为未定义。

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

Answer 2

没有花括号的箭头函数是一个隐含返回。所以你正在返回状态。价值行动。有效载荷是一个数字。

Redux Toolkit允许您返回一个新状态（类型状态|Writable草稿

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

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

1. 您可以直接使用加法赋值操作符=

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

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

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

如果存在除值之外的属性，则需要复制它们，如在传统Redux还原器中看到的{…state，value:newValue}。Redux工具包提供了选项1和2，因此您不必这样做。但是如果你选择返回一个新状态，那么它必须是一个完整的状态。