Question

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

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

这是一条错误消息。：TS2322：类型“数字”不可分配给类型“void |状态 | 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

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

Redux Toolkit 允许您返回新状态（类型 State | WritableDraft<State>）或修改草稿状态而不返回任何内容（类型 void）。您会收到 Typescript 错误，因为返回的 number 既不是也不是这些。

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

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

您可以直接使用 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 an object 与属性 value 结合起来。

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

如果除了 value 之外还有其他属性，您需要像 {...state, value: newValue } 一样复制它们，这是您在传统 Redux 减速器中看到的。 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)

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

2 个答案: