Redux-toolkit usage with Typescript without state mutation

Question

I'm working on a React project which is using Redux-Toolkit in JavaScript. I'm trying to shift project to TypeScript for debugging ease and Type Safety benefits. My Slices code is as

export const entitiesSlice = createSlice({
    name: "entities",
    initialState: initialentitiesState,
    reducers: {
      // getentityById
      entityFetched: (state, action) => {
        state.actionsLoading = false;
        state.entityForEdit = action.payload.entityForEdit;
        state.error = null;
      },
      // findentities
      entitiesFetched: (state, action) => {
        const { totalCount, entities } = action.payload;
        state.listLoading = false;
        state.error = null;
        state.entities = entities;
        state.totalCount = totalCount;
      },
      // createentity
      entityCreated: (state, action) => {
        state.actionsLoading = false;
        state.error = null;
        state.entities.push(action.payload.entity);
      },
      // updateentity
      entityUpdated: (state, action) => {
        state.error = null;
        state.actionsLoading = false;
        state.entities = state.entities.map(entity => {
          if (entity.id === action.payload.entity.id) {
            return action.payload.entity;
          }
          return entity;
        });
      },
      // deleteentities
      entitiesDeleted: (state, action) => {
        state.error = null;
        state.actionsLoading = false;
        state.entities = state.entities.filter(
          el => !action.payload.ids.includes(el.id)
        );
      },
      }
    }
  });

But I think the assignment like this state.somevar=updatedval is doing state mutation which is not good. I want to declare my state Interface with readonly to avoid state mutation. I have gone through the Redux-Toolkit-Usage-With-Typescript, which I think should avoid state mutation but all code snippets seem to be doing state mutation. I want something like this

      entityFetched: (state, action) => {
        return {
          ...state,
          actionsLoading:false,
          entityForEdit:action.payload.entityForEdit,
          error:null
        }
      }

Please guide me if I'm missing something or misinterpretting the meaning of state mutation. Any broader advice for using TypeScript with React would be most welcomed! Thanks a Lot!

markerikson · Accepted Answer · 2020-08-31 16:04:05Z

2

Redux Toolkit's createReducer and createSlice APIs use the Immer library internally, which allows you to write "mutating" syntax in your reducers, but turns that into safe and correct immutably updates.

Please read through the new "Redux Essentials" core docs tutorial for further explanations on how Redux relies on immutability, and how Immer makes it safe to write "mutations" in your reducers.

answered Aug 31, 2020 at 16:04

markerikson

67.9k10 gold badges161 silver badges177 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DevLoverUmar Over a year ago

Ok Thanks for your great Answer! However, can I still write something like this using spread operator to recreate state object ...... return { ...state, actionsLoading:false, entityForEdit:action.payload.entityForEdit, error:null }

markerikson Over a year ago

Yes. Immer allows you to either mutate the existing state or return an entirely new state, so you can still write a nested spread of some form if you really want to.

Collectives™ on Stack Overflow

Redux-toolkit usage with Typescript without state mutation

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related