How to fix typescript error in redux-toolkit?

Question

I'm doing a redux-toolkit tutorial with typescript. But I'm a typescript beginner.

I don't know what the problem is here. Please give me your insight.

This is an error message. : TS2322: Type 'number' is not assignable to type '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;

Linda Paiste · Accepted Answer · 2022-02-05 18:34:36Z

10

An arrow function without curly braces around it is an implied return. So you are returning state.value + action.payload which is a number.

Redux Toolkit allows you to either return a new state (type State | WritableDraft<State> at the time of this answer, or type State | Draft<State> in newer versions of RTK) or modify the draft state and not return anything (type void). You get a Typescript error because returning number is neither or these.

You likely want to modify the draft state, so you need curly braces around your function body so that you aren't returning anything.

These three functions are all valid. Ordered from least to most verbose:

You can increment the value directly using the addition assignment operator +=

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

You can assign a new value to the state.value property with assignment operator =

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

(Not recommended) You can return an entirely new state. I am using parentheses around curly braces to return an object with the property value.

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

If there were properties other than value you would need to copy them like {...state, value: newValue } which is what you see in traditional Redux reducers. Redux Toolkit makes options 1 and 2 available so that you don't have to do this. But if you chose to return a new state then it must be a complete state.

edited Feb 5, 2022 at 18:34

answered Apr 11, 2021 at 2:28

Linda Paiste

42.6k8 gold badges81 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

suyeon Over a year ago

Thank you for your detailed explanation!! This problem was my lack of understanding of JavaScript and Redux.

joekevinrayan96 Over a year ago

@Linda Paiste may I know what's the writabledraft is. soz I did try to find what that is but couldn't find it anywhere?

Linda Paiste Over a year ago

@kevinTHEprogrammer the WritableDraft type comes from immer, which is the package that Redux Toolkit uses under the hood for immutable updates. WritableDraft used to be re-exported by Redux Toolkit, but it looks like now they have switched to using the immer Draft type instead.

NearHuscarl · Accepted Answer · 2021-04-11 12:06:19Z

0

CaseReducer return value must be void | State | WritableDraft while your expression:

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

Is a function that returns a number. The solution is to add the void operator before the return value to set it to undefined.

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

edited Apr 11, 2021 at 12:06

answered Apr 10, 2021 at 7:28

NearHuscarl

83k24 gold badges321 silver badges291 bronze badges

4 Comments

phry Over a year ago

That would still do noting though. Make it (state, action) => { state.value += action.payload } or (state, action) => { state.value = state.value + action.payload }

NearHuscarl Over a year ago

@phry I'm not sure what you mean, but it works in this codesandbox. Also here is the typescript playground

phry Over a year ago

It has no more type error, but it also does nothing on runtime as it adds two numbers and throws away the result. The intention of the question asker was to add the two numbers and reassign them to state.value.

NearHuscarl Over a year ago

@phry ooh I finally got what you mean. Thanks for correcting me. I was focusing more about fixing the type error than the logic itself.

Jokanola · Accepted Answer · 2023-02-15 20:59:09Z

0

I resolved this by updating my typescript version to recommended version

answered Feb 15, 2023 at 20:59

Jokanola

887 bronze badges

Collectives™ on Stack Overflow

How to fix typescript error in redux-toolkit?

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related