Redux TypeScript - Error A case reducer on a non-draftable value must not return undefined redux

0 votes

I'm trying to import typescript in my redux application. I use redux toolkit createSlice function like this:

const slice = createSlice({
  name: sliceName,
  initialState,
  reducers: {
    updateMode(state: SliceState, action: PayloadAction<ModePayload>) {
      state = action.payload.mode;
    },
  },
});

When I dispatch a updateMode action, I receive the following error:

Error: A case reducer on a non-draftable value must not return undefined

But my action.payload is well defined and redux toolkit is up to date. It have something to do with my code but I can't figure it out...

I tried to return state in updateMode and it works, but I get a TypeScript error:

Type '(state: SliceState, action: { payload: ModePayload; type: string; }) => SliceState' is not assignable to type 'CaseReducer<"SHOW_LIST", { payload: any; type: string; }> | CaseReducerWithPrepare<"SHOW_LIST", PayloadAction<any, string, any, any>>'.
  Type '(state: SliceState, action: { payload: ModePayload; type: string; }) => SliceState' is not assignable to type 'CaseReducer<"SHOW_LIST", { payload: any; type: string; }>'.
    Type 'SliceState' is not assignable to type 'void | "SHOW_LIST"'.
      Type '"SHOW_SKILL"' is not assignable to type 'void | "SHOW_LIST"'

Can someone explain to me what am I doing wrong ?

Below my full code:

import { createSlice, PayloadAction } from "@reduxjs/toolkit";

type SliceState = "SHOW_LIST" | "SHOW_SKILL";

let initialState: SliceState = "SHOW_LIST";

const sliceName = "mode";

interface ModePayload {
  mode: SliceState;
}

//--- Slice reducer ---

const modeSlice = createSlice({
  name: sliceName,
  initialState,
  reducers: {
    updateMode(state: SliceState, action: PayloadAction<ModePayload>) {
      return (state = action.payload.mode);
    },
  },
});
export const { updateMode } = modeSlice.actions;
export default modeSlice.reducer;
Jun 15, 2022 in TypeSript by Logan
• 2,140 points
7,023 views

1 answer to this question.

0 votes

The actual problem is with this line:

state = action.payload.mode;

This doesn't actually accomplish anything useful. Immer works by tracking mutations to an existing value, like state.someField = 123. The line you wrote only changes the local state variable to point to something else instead.

Immer requires that you either return an entirely new state value, or mutate the existing state. That line of code does neither. Instead, the reducer only ends up returning undefined, thus the error.

If you want to replace the existing state entirely, you should just do return action.payload.mode.

Also, as a side note: if initialState is correctly typed, you don't have to supply a type for state for each reducer, as it will be inferred.

answered Jun 16, 2022 by Nina
• 3,060 points

Related Questions In TypeSript

0 votes
1 answer

TypeScript ES6: import module "File is not a module error"

We need the export, as a part of ...READ MORE

answered Jun 7, 2022 in TypeSript by Nina
• 3,060 points
14,912 views
0 votes
1 answer

TypeScript error: "'Foo' only refers to a type, but is being used as a value here."?

To do type checking at runtime with ...READ MORE

answered Jun 8, 2022 in TypeSript by Nina
• 3,060 points
48,768 views
0 votes
1 answer

Using TypeScript, and Object.assign gives me an error "property 'assign' does not exist on type 'ObjectConstructor'"

You can use type assertion, like this: (<any>Object).as ...READ MORE

answered Aug 3, 2022 in TypeSript by Abhinaya
• 1,160 points
3,730 views
0 votes
1 answer

What is "not assignable to parameter of type never" error in TypeScript?

All you have to do is define ...READ MORE

answered May 31, 2022 in TypeSript by Nina
• 3,060 points
51,458 views
0 votes
1 answer

How to set meta tags using Angular universal SSR and ngx-seo plug-in?

first Install the plug-in with npm i ngx-seo ...READ MORE

answered Feb 11, 2022 in Others by narikkadan
• 63,700 points
1,989 views
0 votes
1 answer

How to use next-seo for setting nextjs meta tag with multiple OGP images?

https://github.com/garmeeh/next-seo use this git repo that contains ...READ MORE

answered Feb 24, 2022 in Others by narikkadan
• 63,700 points
5,580 views
0 votes
0 answers

how to sign bitcoin psbt with ledger?

I'm trying to sign a PSBT transaction ...READ MORE

Mar 9, 2022 in Blockchain by Soham
• 9,700 points
1,371 views
0 votes
1 answer

Can't bind to 'ngModel' since it isn't a known property of 'input'

Just add this in the app.module.ts file: import { FormsModule ...READ MORE

answered Apr 30, 2022 in Other DevOps Questions by narikkadan
• 63,700 points
4,072 views
0 votes
1 answer
0 votes
1 answer

TypeScript Object assign gives me an error property assign does not exist on type ObjectConstructor

For TypeScript 2.1 and higher, you can ...READ MORE

answered May 31, 2022 in TypeSript by Nina
• 3,060 points
1,683 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP