Getting error on updating boolean state in Redux

Question

My state data:

options: [
      {
        id: 1,
        name: "Sale",
        isTrue: false,
      },
      {
        id: 2,
        name: "New in",
        isTrue: false,
      },
    ],

And, in reducers I have:

    closeOptions: (state) => {
      state.options  = state.options.map((item) => (item.isTrue = false));
    },

But I am getting error in state.options with red underline in vscode. And, it shows below error:

Type 'boolean[]' is not assignable to type 'WritableDraft<{ id: number; name: string; isTrue: boolean; }>[]'.
  Type 'boolean' is not assignable to type 'WritableDraft<{ id: number; name: string; isTrue: boolean; }>'.ts(2322)

More,

  Unhandled Runtime Error
TypeError: Cannot create property 'isTrue' on boolean 'false'

Source

  105 | closeOptions: (state) => {
> 106 |   state.options = state.options.map((item) => (item.isTrue = false));
      |                                                          ^
  107 | },

How can I resolve this issue?

Whole project in TS

Sanket Shah · Accepted Answer · 2022-08-19T16:44:28.423

0

You're getting these errors:

Type 'boolean[]' is not assignable to type 'WritableDraft<{ id: number; name: string; isTrue: boolean; }>[]'.
Type 'boolean' is not assignable to type 'WritableDraft<{ id: number; name: string; isTrue: boolean; }>'.ts(2322)

Because when you use state.options.map((item) => (item.isTrue = false)) in closeOptions it's returning [false, false] whose type is boolean[] which is completely different from type WritableDraft<{ id: number; name: string; isTrue: boolean; }>[].

Change closeOptions function to this:

closeOptions: (state) => {
   state.options?.forEach((item) => (item.isTrue = false))
}

edited Aug 19 '22 at 16:44

answered Aug 19 '22 at 16:23

Sanket Shah

2,888
1
11
22

Oh, that means I had to return the full object with updated value? – ndm Aug 19 '22 at 16:36
Exactly! You need to use `forEach` instead of `map`. @ndm. – Sanket Shah Aug 19 '22 at 16:37
1

Yes absolutely. Thanks. – ndm Aug 19 '22 at 16:41

score 0 · Answer 2 · answered Aug 19 '22 at 16:40

0

If you are using Redux Toolkit, you can simply do:

closeOptions: (state) => {
    state.options.forEach((item) => {
        item.isTrue = false;
    });
},

answered Aug 19 '22 at 16:40

Guillaume Brunerie

4,676
3
24
32

Yes. It's also working. So, it will update the value without return. – ndm Aug 19 '22 at 16:42

Getting error on updating boolean state in Redux

2 Answers2