{"id":1367,"date":"2025-02-07T00:00:00","date_gmt":"2025-02-06T23:00:00","guid":{"rendered":"https:\/\/demo.sidekick.be\/itenium\/reduxjs-toolkit-immer\/"},"modified":"2025-11-28T13:31:41","modified_gmt":"2025-11-28T12:31:41","slug":"reduxjs-toolkit-immer","status":"publish","type":"post","link":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/reduxjs-toolkit-immer\/","title":{"rendered":"ReduxJS\/Toolkit: Immer"},"content":{"rendered":"

Redux Bugs<\/h1>\n

Redux bugs are almost always cases where you didn\u2019t quite spread enough and\/or did an accidental mutation of the state.<\/p>\n

This is exactly the problem immer addresses and does so in a way that you basically don\u2019t know you\u2019re using immer until you inspect the type and see WritableDraft<T><\/code>.<\/p>\n

Example<\/h1>\n

Without Immer<\/h2>\n

Do you really want to be doing this\u2026<\/p>\n

function reducerSpreadHell(state, action) {\n  return {\n    ...state,\n    first: {\n      ...state.first,\n      second: {\n        ...state.first.second,\n        [action.someId]: {\n          ...state.first.second[action.someId],\n          fourth: action.someValue,\n        },\n      },\n    },\n  }\n}\n<\/code><\/pre>\n
One could argue that you should be normalizing your store instead of writing reducers like that, and you\u2019d be right.<\/p>\n
With Immer<\/h2>\n
Still, with immer, all that becomes just this:<\/p>\n
state.first.second[action.someId].fourth = action.someValue;\n<\/code><\/pre>\n
Immer Reducers<\/h1>\n
You\u2019d write them as if you just didn\u2019t care about immutability!<\/p>\n
import { current, PayloadAction } from \"@reduxjs\/toolkit\";\n\nreducers: {\n  addTodo: (state: WritableDraft<Todo>[], action: PayloadAction<Todo>) => {\n    \/\/ ReduxJS\/Toolkit wraps the Todo[] state in a WritableDraft\n    \/\/ \"[].push()\" does NOT mutate!\n    \/\/ Same for pop, shift, splice etc...\n    state.push(action.payload);\n  },\n\n  removeTodo: (state, action: PayloadAction<number>) => {\n    \/\/ ATTN: state = newState does NOT work!\n    \/\/ In such case, return the newState\n    return state.filter(todo => todo.id !== action.payload);\n  },\n\n  \/\/ ATTN: Mutate or Return, but not both!\n  altAddTodo: (state, action: PayloadAction<Todo>) => void state.push(action.payload),\n\n  toggleTodo: (state, action: PayloadAction<number>) => {\n    \/\/ If you want to look at the current state, you need to use current()\n    \/\/ There is also original()\n    console.log('current(state)', current(state));\n\n    const todo = state.find(todo => todo.id === action.payload)!;\n    todo.done = !todo.done;\n  },\n\n  updateTodo: (state, action: PayloadAction<Todo>) => {\n    const index = state.findIndex(todo => todo.id === action.payload.id);\n    if (index !== -1) {\n      state[index] = action.payload;\n    }\n  },\n},\n<\/code><\/pre>\n
Caveats<\/h2>\n
There are some caveats like using current()<\/code> when you want to look at the state.<\/p>\n
Replacing the entire state<\/h3>\n
As in the case of removeTodo, you cannot completely replace state<\/code>.<\/p>\n
\/\/ \u26a0\ufe0f\u26a0\ufe0f DOES NOT WORK \u26a0\ufe0f\u26a0\ufe0f\nremoveTodo: (state, action: PayloadAction<number>) => {\n  \/\/ This could only work if state would be \"by ref\"\n  \/\/ which JavaScript doesn't have\n  state = state.filter(todo => todo.id !== action.payload);\n}\n\n\/\/ \u2714\ufe0f\u2714\ufe0f DOES WORK \u2714\ufe0f\u2714\ufe0f\nremoveTodo: (state, action: PayloadAction<number>) => {\n  return state.filter(todo => todo.id !== action.payload);\n}\n<\/code><\/pre>\n
Reducers without curly braces<\/h3>\n
Use void<\/code> for your one-liner reducers:<\/p>\n
\/\/ \u26a0\ufe0f\u26a0\ufe0f TypeScript ERROR \u26a0\ufe0f\u26a0\ufe0f\n\/\/ [].push() returns a number which is not a valid new state\naddTodo: (state, action: PayloadAction<Todo>) => state.push(action.payload)\n\n\/\/ \u2714\ufe0f\u2714\ufe0f BOTH WORK \u2714\ufe0f\u2714\ufe0f\naddTodo: (state, action: PayloadAction<Todo>) => void state.push(action.payload)\naddTodo: (state, action: PayloadAction<Todo>) => {\n  state.push(action.payload);\n}\n<\/code><\/pre>\n
Primitives cannot be wrapped<\/h3>\n
If you extract a primitive value (number, bool, string) from the state and then manipulate it, you\u2019re no longer working with a WritableDraft and are just mutating the local variable.<\/p>\n
addMessage: (state, action: PayloadAction<any>) => {\n  \/\/ \u26a0\ufe0f\u26a0\ufe0f DOES NOT WORK \u26a0\ufe0f\u26a0\ufe0f\n  let { newMessagesCount } = state;\n  newMessagesCount++;\n\n  \/\/ \u2714\ufe0f\u2714\ufe0f DOES WORK \u2714\ufe0f\u2714\ufe0f\n  state.newMessagesCount++;\n}\n<\/code><\/pre>\n
Under the hood<\/h1>\n
Immer\u2019s bread and butter is the produce(baseState, recipe)<\/code> function. It takes your baseState<\/code>, wraps it in a WritableDraft<\/code> and executes a recipe<\/code> against it, which means calling your reducer with the dispatched action. It then creates the new state by re-applying the steps done in the recipe to the baseState, but in a non-mutating way.<\/p>\n
The ReduxJS\/Toolkit reducers have already called produce<\/code>, so this has been abstracted away for us.<\/p>\n
\"The<\/p>\n
Produce Example<\/h2>\n
Small code example to illustrate how produce<\/code> works. In the accompanying git repository, the code is a bit more involved and includes tests to prove that only the objects that changed actually have different references!<\/p>\n
import { produce } from \"immer\";\n\ninterface UpdatePizzaTopping {\n  type: \"\ud83c\udf44\" | \"\ud83c\udf36\ufe0f\" | \"\ud83e\udd53\";\n  doubleIt: boolean;\n}\n\nconst reducerTastyPizza = (baseState: PizzaState, action: UpdatePizzaTopping) => {\n  const recipe = (draft: WritableDraft<PizzaState>) => {\n    const topping = draft.toppings.find(topping => topping.type === action.type);\n    if (!topping)\n      return;\n\n    topping.doubleIt = action.doubleIt;\n  }\n\n  const newState: PizzaState = produce(baseState, recipe);\n  return newState;\n}\n<\/code><\/pre>\n
Which you would typically just write like so:<\/p>\n
const reducerTastyPizza = (state: PizzaState, action: UpdatePizzaTopping) => {\n  return produce(state, draft => { \/* do stuff here! *\/ });\n}\n<\/code><\/pre>\n
Outside of ReduxJS\/Toolkit<\/h1>\n
Immer can be useful even if you are not using ReduxJS\/Toolkit. Or just outside your reducers \u2013 you already have the dependency anyway!<\/p>\n
In a form Component, you might have something like<\/p>\n
const [title, setTitle] = useState(\"\");\nconst [text, setText] = useState(\"\");\n\/\/ If you've got 10 properties, then 10x useState???\n<\/code><\/pre>\n
Nimmer!<\/h2>\n
import { produce } from \"immer\";\n\nconst TodoAdd = () => {\n  const [todo, setTodo] = useState<Todo>(produce(() => ({\n    title: '',\n    text: '',\n  })));\n\n  return (\n    <>\n      <input\n        value={todo.title}\n        onChange={e => setTodo(produce(todo, draft => {draft.title = e.target.value}))}\n      \/>\n      <textarea\n        value={todo.text}\n        onChange={e => setTodo(produce(todo, draft => {draft.text = e.target.value}))}\n      \/>\n    <\/>\n  );\n}\n<\/code><\/pre>\n
Uhoh, setTodo(produce(todo, draft...))<\/code>, might as well stick with my 10x useState!<\/p>\n
You can make this a lot nicer with a helper function, while still keeping everything type-safe:<\/p>\n
const updateTodo = <K extends keyof Todo>(key: K, value: Todo[K]) => {\n  setTodo(produce(todo, draft => {\n    draft[key] = value;\n  }));\n}\n\nreturn (\n  <input value={todo.title} onChange={e => updateTodo('title', e.target.value)} \/>\n)\n<\/code><\/pre>\n
useImmer<\/h2>\n
But of course there is a package for that!<\/p>\n
<\/a>immerjs\/use-immer<\/a>: Use immer to drive state with a React hooks<\/p>\n
import { useImmer } from \"use-immer\";\n\nconst TodoAdd = () => {\n  const [todo, setTodo] = useImmer<Todo>({\n    title: '',\n    text: '',\n  });\n\n  return (\n    <>\n      <input\n        value={todo.title}\n        onChange={e => setTodo(draft => draft.title = e.target.value)}\n      \/>\n      <textarea\n        value={todo.text}\n        onChange={e => setTodo(draft => draft.text = e.target.value)}\n      \/>\n    <\/>\n  );\n}\n<\/code><\/pre>\n
use-immer<\/code> also exposes useImmerReducer<\/code> to replace your useReducer<\/code>s.<\/p>\n
Also in this series<\/h1>\n