Skip to content

Commit

Permalink
docs(#1220): revise immer middleware page (#1479)
Browse files Browse the repository at this point in the history
- fix case in naming,
- check if the code snippets are up-to-date
  • Loading branch information
sewera committed Dec 21, 2022
1 parent b1cea64 commit 4a99653
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 20 deletions.
10 changes: 5 additions & 5 deletions docs/guides/updating-state.md
Expand Up @@ -98,21 +98,21 @@ merging that in with the new state values. Like so:
This is very long! Let's explore some alternatives that will make your life
easier.
### With immer
### With Immer
Many people use [immer](https://github.com/immerjs/immer) to update nested
Many people use [Immer](https://github.com/immerjs/immer) to update nested
values. Immer can be used anytime you need to update nested state such as in
React, Redux and of course, Zustand!
You can use immer to shorten your state updates for deeply nested object. Let's
You can use Immer to shorten your state updates for deeply nested object. Let's
take a look at an example:
```ts
immerInc: () =>
set(produce((state: State) => { ++state.deep.nested.obj.count })),
```
What a reduction!. [Please take note of the gotchas listed here](../integrations/updating-draft-states.md).
What a reduction! Please take note of the [gotchas listed here](../integrations/immer-middleware.md).
### With optics-ts
Expand All @@ -123,7 +123,7 @@ There is another option with [optics-ts](https://github.com/akheron/optics-ts/):
set(O.modify(O.optic<State>().path("deep.nested.obj.count"))((c) => c + 1)),
```
Unlike immer, optics-ts doesn't use proxies or mutation syntax.
Unlike Immer, optics-ts doesn't use proxies or mutation syntax.
### With Ramda
Expand Down
Expand Up @@ -3,13 +3,15 @@ title: Immer middleware
nav: 16
---

The [Immer](https://github.com/immerjs/immer) middleware enables you to use an immutable state in a more convenient
way. Also, with `Immer` you can simplify handling immutable data structures on
`Zustand`.
The [Immer](https://github.com/immerjs/immer) middleware enables you
to use immutable state in a more convenient way.
Also, with Immer, you can simplify handling
immutable data structures in Zustand.

## Installation

In order to use the Immer middleware in `Zustand`, you will need to install `Immer` as a direct dependency.
In order to use the Immer middleware in Zustand,
you will need to install Immer as a direct dependency.

```bash
npm install immer
Expand Down Expand Up @@ -101,22 +103,25 @@ export const useTodoStore = create(

## Gotchas

On this page we can find some things that we need to keep in mind when we are
using `Zustand` with `Immer`.
In this section you will find some things
that you need to keep in mind when using Zustand with Immer.

### My subscriptions aren't being called

If you are using `Immer`, make sure you are actually following the rules of
[Immer](https://immerjs.github.io/immer/pitfalls).
If you are using Immer,
make sure you are actually following
[the rules of Immer](https://immerjs.github.io/immer/pitfalls).

For example, you have to add `[immerable] = true` for
[class objects](https://immerjs.github.io/immer/complex-objects) to work. If
you don't do this, `Immer` will still mutate the object, but not as a proxy, so
it will also update the current state. `Zustand` checks if the state has
actually changed, so since both the current state as well as the next state are
equal (if you don't do it correctly), it will skip calling the subscriptions.
[class objects](https://immerjs.github.io/immer/complex-objects) to work.
If you don't do this, Immer will still mutate the object,
but not as a proxy, so it will also update the current state.
Zustand checks if the state has actually changed,
so since both the current state and the next state are
equal (if you don't do it correctly),
Zustand will skip calling the subscriptions.

## CodeSandbox Demo

- Basic: https://codesandbox.io/s/zustand-updating-draft-states-basic-demo-zkp22g
- Advanced: https://codesandbox.io/s/zustand-updating-draft-states-advanced-demo-3znqzk
- [Basic](https://codesandbox.io/s/zustand-updating-draft-states-basic-demo-zkp22g),
- [Advanced](https://codesandbox.io/s/zustand-updating-draft-states-advanced-demo-3znqzk).

0 comments on commit 4a99653

Please sign in to comment.