Immer - An immer producer returned a new value and modified react native

Question

    toggleAllClassList: (state, action) => {
        let allClassListLocal = state.classList || [];

        var isAllSelected = false;
        allClassListLocal.forEach(function (item: any) {
            item.LstParentInfo.forEach((subItem: any) => {
                subItem.IsSelected = !subItem.IsSelected;
                isAllSelected = subItem.IsSelected;
            });
        });


        return {
            ...state,
            classList: [...allClassListLocal],
            isClassListSelected: isAllSelected,
            isAllSelected: isAllSelected,
        };
    }

I am getting this error

[Immer] An immer producer returned a new value and modified react native

I am using redux tool kit and getting this error. Any pointers on why is that?

score 2 · Accepted Answer · answered Jun 23 '21 at 11:15

You are modifying state in your forEach and you are also returning a new state. You are allowed to do either of both, but not both at the same time.

As solution would look like



    toggleAllClassList: (state, action) => {
        var isAllSelected = false;
        if (state.classList) {
          state.classList.forEach(function (item: any) {
              item.LstParentInfo.forEach((subItem: any) => {
                  subItem.IsSelected = !subItem.IsSelected;
                  isAllSelected = subItem.IsSelected;
              });
          });
        }

        state.isClassListSelected = isAllSelected
        state.isAllSelected = isAllSelected
    }

Generally, give https://redux-toolkit.js.org/usage/immer-reducers a good read.

Immer - An immer producer returned a new value *and* modified react native

1 Answers1

Immer - An immer producer returned a new value and modified react native