CODEWITHSUNDEEP
reactjstypescriptreduxredux-toolkit
Rocky
Rocky

Reputation: 117

corrupted CreateSliceOptions types @reduxjs/toolkit

Using reducers in my slice instance ( redux/toolkit ) I get this error.
'reducers' does not exist in type 'CreateSliceOptions<unknown, SliceCaseReducers<unknown>, string>'.ts(2345)
Instead of reducers, addPermissions exits in type (CreateSliceOptions).
I guess something might have gone wrong with my typescript types

code:

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

interface IPermission {}

interface IState {
    userPermissions: IPermission[];
}

export const initialState: IState = {
    userPermissions: localStorage.getItem("token") ? [] : [],
};

export const permissionSlice = createSlice({
    name: "permissions",
    initialState,
    reducers: {
        addPermission: (state: any, action: any) => {
            state.userPermissions = action.payload;
        },
    },
});

export const { addPermission } = permissionSlice.actions;
export default permissionSlice.reducer;

Upvotes: 0

Views: 455

Answers (4)

Rocky
Rocky

Reputation: 117

This was caused by corrupted redux node_modules. I removed all redux node_modules and reinstalled them, which fixed the problem.

Upvotes: 0

markerikson
markerikson

Reputation: 67489

I'm a Redux maintainer.

Most likely the real problem is the use of (state: any, action: any) in your addPermissions reducer. Don't do this!.

The right answer is to not provide any type for state, because it will be automatically inferred from the initialState field, and then use RTK's PayloadAction to type the action parameter:

export const permissionSlice = createSlice({
    name: "permissions",
    initialState,
    reducers: {
        addPermission: (state, action: PayloadAction<IPermission[]>) => {
            state.userPermissions = action.payload;
        },
    },
});

Please make sure you're following the approach we show in our Redux docs TS setup page:

Upvotes: 1

Ahmed Sbai
Ahmed Sbai

Reputation: 16199

try as to consider the type as SliceCaseReducers<IState>

reducers: {
    addPermission: (state: IState, action: any) => {
        state.userPermissions = action.payload;
    },
} as SliceCaseReducers<IState>,

Upvotes: 0

user15811966
user15811966

Reputation: 100

In your code, the type of the slice state is IState, so you should update the type of the reducers field to be SliceCaseReducers.

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

interface IPermission {}

interface IState {
    userPermissions: IPermission[];
}

export const initialState: IState = {
    userPermissions: localStorage.getItem("token") ? [] : [],
};

export const permissionSlice = createSlice({
    name: "permissions",
    initialState,
    reducers: {
        addPermission: (state: IState, action: any) => {
            state.userPermissions = action.payload;
        },
    } as SliceCaseReducers<IState>,
});

export const { addPermission } = permissionSlice.actions;
export default permissionSlice.reducer;

Upvotes: 0

Related Questions