JS Built-ins
← redux-toolkit3 / 22
redux-toolkitcreateSlicebeginner

Immer Mutations in Reducers

📖 Usage Example
const { createSlice } = ReduxToolkit
const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo(state, action) { state.push(action.payload) },
  },
})

Immer lets you mutate the draft state directly — createSlice handles the immutable update behind the scenes.

Immer Mutations in Reducers

createSlice uses Immer under the hood, so you can write "mutating" code that is actually applied immutably. You can push, splice, or assign properties directly.

Challenge: Create a todos slice where:

  • addTodo pushes a todo to the array
  • removeTodo removes a todo by id
todosSlice.reducer([], addTodo({ id: 1, text: 'buy milk' }))
// → [{ id: 1, text: 'buy milk' }]
💡 Hints (3)
  • • Use `state.push(action.payload)` to add — Immer makes this safe.
  • • For removeTodo, returning a new array with `filter` also works alongside Immer.
  • • The initial state `[]` is typed as an array, so push and filter are available.