-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update docs content #2508
base: main
Are you sure you want to change the base?
Update docs content #2508
Changes from all commits
9b23d94
b92ba68
e1c081e
8828d67
54344d1
90c23c0
aafed40
3144ea8
f1a3834
aeb7cde
6c07e5f
60846c7
7bdf1cc
a4ab750
1606977
df190b9
a5ceba7
3637fe7
0746ab1
adec185
ee07ba5
626e972
89771e5
72fec5c
b1f84f8
c4322c5
5834bbf
cdba318
ac441ae
aea4a45
479da65
135bc69
17d433d
c542900
c3998cb
27d8afd
3322bea
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
title: Docs Contributors | ||
description: | ||
nav: 301 | ||
--- |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
title: Third-party Libraries | ||
description: | ||
nav: 302 | ||
--- |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
title: Versioning Policy | ||
description: | ||
nav: 303 | ||
--- |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
title: Zustand Videos | ||
description: | ||
nav: 300 | ||
--- |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
title: Async Data and Data Fetching | ||
description: | ||
nav: 106 | ||
--- |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
title: Choosing the State Structure | ||
description: One store, multiple stores, and multiple slices | ||
nav: 104 | ||
--- |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
title: Colocating Actions | ||
description: | ||
nav: 105 | ||
--- |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
title: Extracting State Logic into a Reducer with Redux and Devtools Middlewares | ||
description: | ||
nav: 112 | ||
--- |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
title: Isolating State Between Components | ||
description: | ||
nav: 108 | ||
--- |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
title: Listening to Selected Data with SubscribeWithSelector Middleware | ||
description: | ||
nav: 113 | ||
--- |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
title: Middleware Use Cases | ||
description: | ||
nav: 114 | ||
--- |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
title: Persisting State with Persist Middleware | ||
description: | ||
nav: 111 | ||
--- |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
title: Selecting Data and Preventing Re-renders with selectors and equality function | ||
description: | ||
nav: 107 | ||
--- |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
title: Start a new project | ||
description: Vanilla, React, and React Native | ||
nav: 102 | ||
--- |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
title: Thinking in Zustand | ||
description: Motivation, principles, and glossary | ||
nav: 101 | ||
--- |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
title: 'Tutorial: Tic-Tac-Toe' | ||
description: | ||
nav: 100 | ||
--- |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
title: Using Middlewares | ||
description: | ||
nav: 109 | ||
--- |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
title: Using TypeScript | ||
description: | ||
nav: 103 | ||
--- |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
title: Writing Immutable Updates with Immer Middleware | ||
description: | ||
nav: 110 | ||
--- |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,99 @@ | ||
--- | ||
title: combine | ||
description: | ||
nav: 200 | ||
--- | ||
|
||
# combine | ||
|
||
`combine` middleware lets you create a new state by combining an initial state with additional | ||
state created by a function. This middleware is particularly useful due to infers the state, so you | ||
don't need to type it. | ||
|
||
```js | ||
combine(initialState, additionalStateCreator) | ||
``` | ||
|
||
- [Reference](#reference) | ||
- [Signature](#combine-signature) | ||
- [`setState` function](#setstate-function) | ||
- [`getState` function](#getstate-function) | ||
- [`subscribe` function](#subscribe-function) | ||
- [`storeApi`](#storeapi) | ||
- [Usage](#usage) | ||
- [Troubleshooting](#troubleshooting) | ||
|
||
## Reference | ||
|
||
### `combine` Signature | ||
|
||
```ts | ||
combine<T, U>(initialState: T, additionalStateCreatorFn: StateCreator<T, [], [], U>): Omit<T, keyof U> & U | ||
``` | ||
|
||
#### Parameters | ||
|
||
- `initialState`: The value you want the state to be initially. It can be a value of any type, | ||
except a function. | ||
- `additionalStateCreatorFn`: The state creator function that specifies how the state gets | ||
initialized and updated. It must be pure, should take `setState` function, `getState` function | ||
and `storeApi` as arguments. | ||
|
||
#### Returns | ||
|
||
`combine` returns a new state that is the result of merging the initial state and the additional | ||
state. | ||
|
||
### `setState` function | ||
|
||
The `setState` function lets you update the state to a different value and trigger re-render. You | ||
can pass the next state directly, a next partial state, a function that calculates it from the | ||
previous state, or replace it completely. | ||
|
||
#### Parameters | ||
|
||
- `nextState`: The value that you want the state to be. It can be a value of any type, but there is | ||
a special behavior for functions. | ||
- If you pass an object as a `nextState`. It will shallow merge `nextState` with the current | ||
state. You can pass only the properties you want to update, this allows for selective state | ||
updates without modifying other properties. | ||
- If you pass a non-object as a `nextState`, make sure you use `replace` as `true` to avoid | ||
unexpected behaviors. | ||
- If you pass a function as a `nextState`. It must be pure, should take current state as its | ||
only argument, and should return the next state. The next state returned by the updater | ||
function face the same restrictions of any next state. | ||
- `replace`: This optional boolean flag controls whether to replace the entire state or merge the | ||
update with the current state. | ||
|
||
#### Returns | ||
|
||
`setState` function do not have a return value. | ||
|
||
### `getState` function | ||
|
||
The `getState` function lets you access to the current state. It can be stale on asynchronous | ||
operations. | ||
|
||
### `subscribe` function | ||
|
||
The `subscribe` function lets you subscribe to state updates. It should take current state and | ||
previous state as arguments. | ||
|
||
#### Parameters | ||
|
||
- `currentState`: The current state. | ||
- `previousState`: The previous state. | ||
|
||
#### Returns | ||
|
||
`subscribe` returns a function that lets you unsubscribe. | ||
|
||
### `storeApi` | ||
|
||
The `storeApi` lets you access to the store API functions like | ||
[`setState` function](#setstate-function), [`getState` function](#getstate-function), and | ||
[`subscribe` function](#subscribe-function). | ||
|
||
## Usage | ||
|
||
## Troubleshooting |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,134 @@ | ||
--- | ||
title: createStore | ||
description: | ||
nav: 202 | ||
--- | ||
|
||
# createStore | ||
|
||
`createStore` lets you create a vanilla store with store API utilities. In React, you can utilize a | ||
vanilla store using the [`useStore`](./use-store) hook. | ||
|
||
```js | ||
createStore(initializer) | ||
``` | ||
|
||
- [Reference](#reference) | ||
- [Signature](#createstore-signature) | ||
- [`setState` function](#setstate-function) | ||
- [`getState` function](#getstate-function) | ||
- [`subscribe` function](#subscribe-function) | ||
- [`storeApi`](#storeapi) | ||
- [Usage](#usage) | ||
- [Updating state based on previous state](#updating-state-base-on-a-previous-state) | ||
- [Updating objects and non-objects in state](#updating-objects-and-non-objects-in-state) | ||
- [Subscribing to state updates](#subscribing-to-state-updates) | ||
- [Split state in multiple slices](#split-state-in-multiple-slices) | ||
- [Troubleshooting](#troubleshooting) | ||
- [I’ve updated the state, but the screen doesn’t update](#ive-updated-the-state-but-the-screen-doesnt-update) | ||
|
||
## Reference | ||
|
||
### `createStore` Signature | ||
|
||
```ts | ||
createStore<T>()(stateCreatorFn: StateCreator<T, [], []>): StoreApi<T> | ||
``` | ||
|
||
#### Parameters | ||
|
||
- `stateCreatorFn`: The value you want the state to be initially. It can be a value of any type, but | ||
when you pass a function should take `setState` function, `getState` function and `storeApi` as | ||
arguments. | ||
|
||
#### Returns | ||
|
||
`createStore` returns a vanilla store with some API utilities. These API utilities are: `setState` | ||
function, `getState` function, and `subscribe` function. | ||
|
||
### `setState` function | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I feel like such functions like There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @sewera that's not supported with the current setup but when we migrate to vitepress we can move everything in one place and then just import them |
||
|
||
The `setState` function lets you update the state to a different value and trigger re-render. You | ||
can pass the next state directly, a next partial state, a function that calculates it from the | ||
previous state, or replace it completely. | ||
|
||
#### Parameters | ||
|
||
- `nextState`: The value that you want the state to be. It can be a value of any type, but there is | ||
a special behavior for functions. | ||
- If you pass an object as a `nextState`. It will shallow merge `nextState` with the current | ||
state. You can pass only the properties you want to update, this allows for selective state | ||
updates without modifying other properties. | ||
- If you pass a non-object as a `nextState`, make sure you use `replace` as `true` to avoid | ||
unexpected behaviors. | ||
- If you pass a function as a `nextState`. It must be pure, should take current state as its | ||
only argument, and should return the next state. The next state returned by the updater | ||
function face the same restrictions of any next state. | ||
- `replace`: This optional boolean flag controls whether the state is completely replaced or only | ||
shallow updated, through a shallow merge. | ||
|
||
#### Returns | ||
|
||
`setState` function do not have a return value. | ||
|
||
### `getState` function | ||
|
||
The `getState` function lets you access to the current state. It can be stale on asynchronous | ||
operations. | ||
Comment on lines
+76
to
+77
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Not sure if "stale on async operations" is technically correct. |
||
|
||
### `subscribe` function | ||
|
||
The `subscribe` function lets you subscribe to state updates. It should take current state, and | ||
its previous state as arguments. | ||
|
||
#### Parameters | ||
|
||
- `currentState`: The current state. | ||
- `previousState`: The previous state. | ||
|
||
#### Returns | ||
|
||
`subscribe` returns a function that lets you unsubscribe from itself. | ||
|
||
### `storeApi` | ||
|
||
The `storeApi` lets you access to the store API utilities. These store API utilities are: | ||
`setState` function, `getState` function, and `subscribe` function. | ||
|
||
## Usage | ||
|
||
### Updating state base on a previous state | ||
|
||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam in provident eius eaque modi, | ||
architecto consequuntur nihil soluta, dolore ratione, deleniti voluptatum unde. Qui veritatis, | ||
deleniti error vero ducimus sunt. | ||
|
||
### Updating objects and non-objects in state | ||
|
||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate consectetur sequi repellendus | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Will it be written before merging? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yes, it will |
||
culpa nesciunt dolores aut. Voluptas corrupti expedita temporibus doloribus, maxime dolor iure | ||
suscipit adipisci hic cumque quasi officia? | ||
|
||
### Subscribing to state updates | ||
|
||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quidem est neque consequuntur, | ||
dolorem eius, explicabo ullam voluptatibus ex corporis qui, quasi eum reprehenderit maxime! Magni | ||
magnam dignissimos eos dicta! | ||
|
||
### Split state in multiple slices | ||
|
||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, sint doloremque incidunt beatae | ||
asperiores tempore amet quam ipsa commodi adipisci nobis quis fugiat aliquam? Facere repellendus | ||
asperiores incidunt maxime facilis? | ||
|
||
## Troubleshooting | ||
|
||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut illo, earum beatae voluptate corporis | ||
saepe ipsa? Placeat animi commodi qui odit debitis eveniet enim maiores, illum tempora repellendus | ||
sint non? | ||
|
||
### I’ve updated the state, but the screen doesn’t update | ||
|
||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi facere vel minus saepe inventore hic | ||
tenetur aspernatur officia ipsam accusantium illum, neque consectetur placeat doloremque pariatur | ||
voluptatum amet odio quos! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
More precisely,
combine
and any other middleware "returns" a state creator.