How to modify state in reduxjs/toolkit with React and TypeScript

Question

When i worked with react-redux i updated the state like this:

case CartActionTypes.ADD_ITEM:
  return {
    ...state,
   cartItems: [...cartItems, { action.payload }];
  };

Now i'm using reduxjs/toolkit with slices, etc.

Should i update the state in the same way or maybe using .push method like this:

export const cartSlice = createSlice({
  name: 'cart',
  initialState: initialState,
  reducers: {
    addItemToCart(state, action) {
      state.cartItems.push(action.payload);
    },
}

Should i always return the state like i did usin

Lin Du · Accepted Answer · 2021-11-09 02:12:56Z

1

See Mutating and Returning State doc

Immer expects that you will either mutate the existing state, or construct a new state value yourself and return it, but not both in the same function! For example, both of these are valid reducers with Immer:

const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    todoAdded(state, action) {
      // "Mutate" the existing state, no return value needed
      state.push(action.payload)
    },
    todoDeleted(state, action.payload) {
      // Construct a new result array immutably and return it
      return state.filter(todo => todo.id !== action.payload)
    }
  }
})

answered Nov 9, 2021 at 2:12

Lin Du

104k138 gold badges340 silver badges575 bronze badges

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

Comments

Pierre Glandon · Accepted Answer · 2021-11-08 20:35:58Z

0

State becomes "mutable" when you are defining reducers inside RTK createSlice. You can therefore use push to update your state without returning it.

answered Nov 8, 2021 at 20:35

Pierre Glandon

232 bronze badges

Collectives™ on Stack Overflow

How to modify state in reduxjs/toolkit with React and TypeScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related