Redux toolkit + Typescript: extraReducers

Question

I'm trying to add typescript to my react/redux project. Here is my slice:

import { createSlice, createAsyncThunk, AnyAction, CaseReducer, PayloadAction } from '@reduxjs/toolkit';
export interface RequestStateBase {
    failed: boolean;
    executing: boolean;
    initialLoad: boolean;
    message: string | null;
    errors: any[]
}
const handlePending = (state: RequestStateBase) => {
    state.failed = false;
    state.executing = true;
    state.message = '';
}

const createCharacter = createAsyncThunk(
    'character/new',
    async (model: any) => characterClient.createCharacter(model)
);

const characterSlice = createSlice({
    name: "character",
    initialState: initialState,
    reducers: {
        cleanCharacterData: (state: CharacterState) => {
            //...
        },
        //...
    },
    extraReducers: builder => {
        builder.addCase(createCharacter.pending, handlePending),
        //...
    }
});

In VS Code everything is fine, but I'm getting the following error during the build:

Line 78:9:  Expected an assignment or function call and instead saw an expression  @typescript-eslint/no-unused-expressions

the line 78 refers to builder.addCase(createCharacter.pending, handlePending)

How to fix that?

Answer 1

Remove the , after that line - you probably wanted to write ;.

The comma operator will not do any real harm there, but generally can cause unexpected behaviour - and it really seems to irritate JSHint there.