From 4a99653967bd0ada4ed1a4bd77dc64eefdaf98ff Mon Sep 17 00:00:00 2001 From: Blazej Sewera Date: Wed, 21 Dec 2022 03:35:17 +0100 Subject: [PATCH] docs(#1220): revise immer middleware page (#1479) - fix case in naming, - check if the code snippets are up-to-date --- docs/guides/updating-state.md | 10 +++--- ...ng-draft-states.md => immer-middleware.md} | 35 +++++++++++-------- 2 files changed, 25 insertions(+), 20 deletions(-) rename docs/integrations/{updating-draft-states.md => immer-middleware.md} (67%) diff --git a/docs/guides/updating-state.md b/docs/guides/updating-state.md index f865179d4..335a971d1 100644 --- a/docs/guides/updating-state.md +++ b/docs/guides/updating-state.md @@ -98,13 +98,13 @@ 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 @@ -112,7 +112,7 @@ take a look at an example: 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 @@ -123,7 +123,7 @@ There is another option with [optics-ts](https://github.com/akheron/optics-ts/): set(O.modify(O.optic().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 diff --git a/docs/integrations/updating-draft-states.md b/docs/integrations/immer-middleware.md similarity index 67% rename from docs/integrations/updating-draft-states.md rename to docs/integrations/immer-middleware.md index 132dad8e0..c455a92be 100644 --- a/docs/integrations/updating-draft-states.md +++ b/docs/integrations/immer-middleware.md @@ -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 @@ -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).