Website-Suche

Wie behebt man einen TypeScript-Fehler in Redux-Toolkit?

Ich mache ein Redux-Toolkit-Tutorial mit TypeScript. Aber ich bin ein TypeScript-Anfänger.

Ich weiß nicht, was hier das Problem ist. Bitte geben Sie mir Ihre Einschätzung.

Dies ist eine Fehlermeldung. : TS2322: Typ 'number' kann dem Typ 'void | State | WritableDraft' nicht zugewiesen werden.

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;

Antwort #1

Eine Pfeilfunktion ohne geschweifte Klammern darum ist ein implizites Return. Du gibst also state.value + action.payload zurück, was eine Zahl ist.

Redux Toolkit erlaubt es Ihnen entweder, einen neuen Zustand zurückzugeben (Typ State | WritableDraft<State> zum Zeitpunkt dieser Antwort, oder Typ State | Draft<State> in neueren Versionen von RTK) oder den Entwurfszustand zu ändern und nichts zurückzugeben (Typ void). Sie erhalten einen Typescript-Fehler, weil die Rückgabe von number keines von beiden ist.

Sie möchten wahrscheinlich den Entwurfszustand ändern, daher benötigen Sie geschweifte Klammern um den Funktionskörper, damit Sie nichts zurückgeben.

Diese drei Funktionen sind alle gültig. Geordnet von am wenigsten bis am ausführlichsten:

  1. Sie können den Wert direkt mit dem Additionszuweisungsoperator += erhöhen.
const increment: CaseReducer<State,PayloadAction<number>> = (state, action) => {
  state.value += action.payload;
}
  1. Sie können der Eigenschaft state.value mit dem Zuweisungsoperator = einen neuen Wert zuweisen
const increment: CaseReducer<State,PayloadAction<number>> = (state, action) => {
  state.value = state.value + action.payload;
}
  1. (Nicht empfohlen) Sie können einen völlig neuen Zustand zurückgeben. Ich verwende Klammern um geschweifte Klammern, um ein Objekt mit der Eigenschaft value zurückzugeben.
const increment: CaseReducer<State,PayloadAction<number>> = (state, action) => ({
  value: state.value + action.payload
});

Wenn es andere Eigenschaften als value gäbe, müssten Sie diese wie {...state, value: newValue } kopieren, was Sie in traditionellen Redux-Reducer sehen. Redux Toolkit macht die Optionen 1 und 2 verfügbar, sodass Sie dies nicht tun müssen. Aber wenn Sie sich entscheiden, einen neuen Zustand zurückzugeben, muss er ein vollständiger Zustand sein.

Antwort #2

CaseReducer-Rückgabewert muss void | State | WritableDraft sein, während Ihr Ausdruck:

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

Ist eine Funktion, die eine Zahl zurückgibt. Die Lösung besteht darin, den void-Operator vor dem Rückgabewert hinzuzufügen, um ihn auf undefined zu setzen.

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

Verwandte Artikel