Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: pmndrs/zustand
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v4.1.5
Choose a base ref
...
head repository: pmndrs/zustand
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: v4.2.0
Choose a head ref
  • 11 commits
  • 20 files changed
  • 8 contributors

Commits on Dec 11, 2022

  1. Update updating-draft-states.md (#1476)

    grammer
    Guchii authored Dec 11, 2022
    Copy the full SHA
    86c1985 View commit details

Commits on Dec 15, 2022

  1. Revise the third-party libraries documentation page (#1478)

    * docs(#1220): third-party libraries page revision
    
    - Make Zustand name always start from a capital letter,
    - Unify list formatting and description style,
    - Change minuses to em-dashes,
    - Change 3rd to third.
    
    * docs(#1220): update links from 3rd-party to third-party
    sewera authored Dec 15, 2022
    Copy the full SHA
    b1cea64 View commit details

Commits on Dec 21, 2022

  1. docs(#1220): revise immer middleware page (#1479)

    - fix case in naming,
    - check if the code snippets are up-to-date
    sewera authored Dec 21, 2022
    Copy the full SHA
    4a99653 View commit details

Commits on Dec 27, 2022

  1. Update how to reset state doc (#1495)

    * Update how to reset state doc
    
    * Minor fixes
    
    * Minor changes
    
    * Minor changes
    
    * Minor changes
    
    * Minor changes
    dbritto-dev authored Dec 27, 2022
    Copy the full SHA
    b885055 View commit details

Commits on Dec 30, 2022

  1. Revise Persisting store data doc page (#1497)

    * docs(#1220): revise persisting-store-data page
    
    - add cross-links
    - add line breaks for easier Markdown reading
    - unify Persist middleware spelling
    - change fishes to bears, because the plural of fish is fish,
      and it would be less readable
    - make sentences more concise
    
    * docs(#1220): make the sentences more concise
    
    * docs(#1220): unify formatting of methods
    sewera authored Dec 30, 2022
    Copy the full SHA
    a8c98d6 View commit details
  2. Update bug_report.md

    dai-shi authored Dec 30, 2022
    Copy the full SHA
    a94941d View commit details

Commits on Jan 1, 2023

  1. feat(middleware/devtools): Better redux devtools. One connection for …

    …all zustand stores (#1435)
    
    * add example project for zustand devonly devtools with better rewind feature of redux devtools
    
    * fix yarn install for demo
    
    * remove lodash from demo
    
    * adjust utils
    
    * remove assets from demo project
    
    * add codesandbox
    
    * devtools for groups of stores
    
    * remove command from .yml
    
    * add tests
    
    * cleanup
    
    * Existing test cleanup
    
    * Slight test cleanup; extract iife
    
    * Slight cleanup
    
    * Non-recursive S
    
    * Remove initialState
    
    Co-authored-by: Corin (CWStra) <cwstra@gmail.com>
    pavlobu and cwstra authored Jan 1, 2023
    1
    Copy the full SHA
    633c7dd View commit details
  2. feat(middleware/persist): new storage option (#1463)

    * feat(middleware/persist): new storage option
    
    * fix typo
    dai-shi authored Jan 1, 2023
    Copy the full SHA
    1e986ec View commit details
  3. Copy the full SHA
    dcc8b60 View commit details
  4. Copy the full SHA
    94d0384 View commit details
  5. 4.2.0

    dai-shi committed Jan 1, 2023
    Copy the full SHA
    e2e383e View commit details
3 changes: 2 additions & 1 deletion .codesandbox/ci.json
Original file line number Diff line number Diff line change
@@ -6,7 +6,8 @@
"simple-react-browserify-x9yni",
"simple-snowpack-react-o1gmx",
"react-parcel-onewf",
"next-js-uo1h0"
"next-js-uo1h0",
"pavlobu-zustand-demo-frutec"
],
"node": "14"
}
2 changes: 1 addition & 1 deletion .github/ISSUE_TEMPLATE/bug_report.md
Original file line number Diff line number Diff line change
@@ -19,7 +19,7 @@ assignees: ''

Please do not ask questions in issues.

- [ ] I understand this is not a question.
- [ ] I've already opened a [discussion](https://github.com/pmndrs/zustand/discussions) before opening this issue.

Please fill this template if you're filling an issue regarding TypeScript.

4 changes: 2 additions & 2 deletions .github/workflows/test-multiple-versions.yml
Original file line number Diff line number Diff line change
@@ -33,8 +33,8 @@ jobs:
- 18.0.0
- 18.1.0
- 18.2.0
- 18.3.0-next-353c30252-20221202
- 0.0.0-experimental-353c30252-20221202
- 18.3.0-next-de7d1c907-20221223
- 0.0.0-experimental-de7d1c907-20221223
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
2 changes: 1 addition & 1 deletion docs/guides/auto-generating-selectors.md
Original file line number Diff line number Diff line change
@@ -69,7 +69,7 @@ const increase = useBearStore.use.increment()

For a working example of this, see the [Code Sandbox](https://codesandbox.io/s/zustand-auto-generate-selectors-forked-rl8v5e?file=/src/selectors.ts).

## 3rd-party Libraries
## Third-party Libraries

- [auto-zustand-selectors-hook](https://github.com/Albert-Gao/auto-zustand-selectors-hook)
- [react-hooks-global-state](https://github.com/dai-shi/react-hooks-global-state)
29 changes: 12 additions & 17 deletions docs/guides/how-to-reset-state.md
Original file line number Diff line number Diff line change
@@ -27,7 +27,7 @@ const initialState: State = {
}

// create store
const useSlice = create<State & Actions>((set, get) => ({
const useSlice = create<State & Actions>()((set, get) => ({
...initialState,

addSalmon: (qty: number) => {
@@ -44,30 +44,24 @@ const useSlice = create<State & Actions>((set, get) => ({
}))
```

Resetting multiple stores at once instead of individual stores
Resetting multiple stores at once

```ts
import _create, { StateCreator, StoreApi, UseBoundStore } from 'zustand'
import _create, { StateCreator } from 'zustand'

const resetters: (() => void)[] = []

export const create = <TState extends unknown>(
createState: StateCreator<TState> | StoreApi<TState>
): UseBoundStore<StoreApi<TState>> => {
// We need to use createState as never to support StateCreator<TState> and
// StoreApi<TState> at the same time.
// We also need to re-type slice to UseBoundStore<StoreApi<TState>>
const slice: UseBoundStore<StoreApi<TState>> = _create(createState as never)
const initialState = slice.getState()

export const create = (<T extends unknown>(f: StateCreator<T> | undefined) => {
if (f === undefined) return create
const store = _create(f)
const initialState = store.getState()
resetters.push(() => {
slice.setState(initialState, true)
store.setState(initialState, true)
})
return store
}) as typeof _create

return slice
}

export const resetAllSlices = () => {
export const resetAllStores = () => {
for (const resetter of resetters) {
resetter()
}
@@ -78,3 +72,4 @@ export const resetAllSlices = () => {

- Basic: https://codesandbox.io/s/zustand-how-to-reset-state-basic-demo-rrqyon
- Advanced: https://codesandbox.io/s/zustand-how-to-reset-state-advanced-demo-gtu0qe
- Immer: https://codesandbox.io/s/how-to-reset-state-advance-immer-demo-nyet3f
10 changes: 5 additions & 5 deletions docs/guides/updating-state.md
Original file line number Diff line number Diff line change
@@ -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
@@ -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
36 changes: 0 additions & 36 deletions docs/integrations/3rd-party-libraries.md

This file was deleted.

Original file line number Diff line number Diff line change
@@ -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
@@ -47,7 +49,7 @@ export const useCountStore = create(
)
```

Updating a complex states
Updating complex states

```ts
import create from 'zustand'
@@ -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).
Loading