CODEWITHSUNDEEP
reactjstypescriptredux-toolkit
Nedim
Nedim

Reputation: 177

Redux toolkit and typescript

I am learning TS, and currently have a problem with the redux-toolkit in it.

I want to create a simple toggle for true/false value but got an error.

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

const initialState = {
  hidden: true,
};
const menuSlice = createSlice({
  initialState,
  reducers: {
    setHidden: (state) => (state.hidden = !state.hidden),
  },
});

error : ype '(state: WritableDraft<{ hidden: boolean; }>) => boolean' is not assignable to type 'CaseReducer<{ hidden: boolean; }, { payload: any; type: string; }> | CaseReducerWithPrepare<{ hidden: boolean; }, PayloadAction<any, string, any, any>>'. Type '(state: WritableDraft<{ hidden: boolean; }>) => boolean' is not assignable to type 'CaseReducer<{ hidden: boolean; }, { payload: any; type: string; }>'. Type 'boolean' is not assignable to type 'void | { hidden: boolean; } | WritableDraft<{ hidden: boolean; }>'.

Upvotes: 0

Views: 999

Answers (1)

Aaron Vasilev
Aaron Vasilev

Reputation: 110

The reason is that you are trying to return statement, you just need to change braces like this

setHidden: state => {
  state.hidden = !state.hidden
}

Upvotes: 2

Related Questions