Problem

I am using Redux-Toolkit and I am having an issue with the code below. When extraReducers is omitted, my code works fine. When extraReducers is listed after reducers, I encounter an error (shown below). When extraReducers is listed before reducers, my code works fine. What am I missing here?

type Item = { id: string, name: string }

export const itemsAdapter = createEntityAdapter<Item>();
const initialState = itemsAdapter.getInitialState();

export const slice = createSlice({
  name: 'items',
  initialState,
  reducers: {  
    itemsAdded(state, action: PayloadAction<{ items: Item[] }>) {
      itemsAdapter.setAll(state, action.payload.items);
    }, 
  },
  extraReducers: (builder) => { /*  },,
});

Error Message

TS2322: Type '(state: WritableDraft<EntityState<Item>>, action: { payload: { items: Item[]; }; type: string; }) => void' is not assignable to type 'CaseReducer<WritableDraft<EntityState<Item>> | undefined, { payload: any; type: string; }> | CaseReducerWithPrepare<WritableDraft<EntityState<Item>> | undefined, PayloadAction<...>>'.
  Type '(state: WritableDraft<EntityState<Item>>, action: { payload: { items: Item[]; }; type: string; }) => void' is not assignable to type 'CaseReducer<WritableDraft<EntityState<Item>> | undefined, { payload: any; type: string; }>'.
    Types of parameters 'state' and 'state' are inpatible.
      Type 'WritableDraft<WritableDraft<EntityState<Item>>> | undefined' is not assignable to type 'WritableDraft<EntityState<Item>>'.
        Type 'undefined' is not assignable to type 'WritableDraft<EntityState<Item>>'.

Problem

I am using Redux-Toolkit and I am having an issue with the code below. When extraReducers is omitted, my code works fine. When extraReducers is listed after reducers, I encounter an error (shown below). When extraReducers is listed before reducers, my code works fine. What am I missing here?

type Item = { id: string, name: string }

export const itemsAdapter = createEntityAdapter<Item>();
const initialState = itemsAdapter.getInitialState();

export const slice = createSlice({
  name: 'items',
  initialState,
  reducers: {  
    itemsAdded(state, action: PayloadAction<{ items: Item[] }>) {
      itemsAdapter.setAll(state, action.payload.items);
    }, 
  },
  extraReducers: (builder) => { /*  },,
});

Error Message

TS2322: Type '(state: WritableDraft<EntityState<Item>>, action: { payload: { items: Item[]; }; type: string; }) => void' is not assignable to type 'CaseReducer<WritableDraft<EntityState<Item>> | undefined, { payload: any; type: string; }> | CaseReducerWithPrepare<WritableDraft<EntityState<Item>> | undefined, PayloadAction<...>>'.
  Type '(state: WritableDraft<EntityState<Item>>, action: { payload: { items: Item[]; }; type: string; }) => void' is not assignable to type 'CaseReducer<WritableDraft<EntityState<Item>> | undefined, { payload: any; type: string; }>'.
    Types of parameters 'state' and 'state' are inpatible.
      Type 'WritableDraft<WritableDraft<EntityState<Item>>> | undefined' is not assignable to type 'WritableDraft<EntityState<Item>>'.
        Type 'undefined' is not assignable to type 'WritableDraft<EntityState<Item>>'.

• javascript
• typescript
• redux
• react-redux
• redux-toolkit

• 3 You will have to share a little bit more code - only the code you are showing here is not very likely to cause something like that. – phry Commented May 29, 2022 at 7:41
• @phry What would cause it then? – RouteMapper Commented Sep 15, 2022 at 4:28
• 1 I have no idea. You describe three code examples and show only one. It's a TypeScript error, but your repro is so inplete nobody could actually open it in an editor and look at the errors or move code around. Show all code examples and share them in a working TypeScript playground: typescriptlang/play – phry Commented Sep 15, 2022 at 5:02
• I ran into this question while experiencing the same problem. I opened an issue on the RTK git repo with specific conditions to repro here: github./reduxjs/redux-toolkit/issues/2862 – George Yates Commented Nov 3, 2022 at 16:07
• 1 please specify the version of react, typescript & redux-toolkit. One thing which you can try is upgrading the packages to their latest version. – Manish Kumar Commented Nov 17, 2022 at 7:07

1 Answer 1

I fixed this by providing a type for the builder parameter.

extraReducers: (builder: ActionReducerMapBuilder<MyCustomState>) => {
  builder.addCase(myCaseReducer, (state, action) => { /* this is code */ });
}

This prevents typescript from inferring MyCustomState | undefined

Does seem like a bug, this wasn't a problem until I updated redux-toolkit