Immer (German for: always) is a tiny package that allows you to work with immutable state in a more convenient way.

To make sure Immer is as small as possible, features that are not required by every project has been made opt-in, and have to be enabled explicitly. This ensures that when bundling your application for …

The Immer package exposes a produce function that does all the work. produce(baseState, recipe: (draftState) => void): nextState produce takes a base state, and a recipe that can be used to perform …

Deep updates in the state of React components can be greatly simplified as by using Immer. The following example shows how to use produce in combination with useState, and can be tried on …

API overview ... Importing immer In most cases, the only thing you need to import from Immer is produce:

Working with immutable data, before Immer, used to mean learning all the immutable update patterns. To help 'unlearning' those patterns here is an overview how you can leverage the built-in JavaScript …

使用 Immer 时，您无需学习专用 API 或数据结构即可从范例中受益。 使用 Immer，您将使用纯 JavaScript 数据结构，并使用众所周知的安全地可变 JavaScript API。

The Immer package ships with type definitions inside the package, which should be picked up by TypeScript and Flow out of the box and without further configuration.

Frequently Asked Questions Q: How does Immer work? Read the (second part of the) introduction blog. Q: Does Immer use structural sharing? So that my selectors can be memoized and such? A: Yes Q: …

关于 Immer 的有趣之处在于 baseState 将保持不变，但 nextState 将反映对 DraftState 所做的所有更改. 在 recipe 中，所有标准的 JavaScript API 都可以在 draft 对象上使用，包括属性字段分配、删除操作 …