mirror of
https://github.com/pmndrs/zustand.git
synced 2025-12-08 19:45:52 +00:00
chore(docs): fix typo in docs & code examples (#1006)
This commit is contained in:
parent
d83c41d312
commit
1011a2fa3c
@ -128,7 +128,7 @@ const useStore = create(combine({ bears: 0 }, (set) => ({
|
||||
|
||||
It's not a lie lie because `{ bears: number }` is still a subtype `{ bears: number, increase: (by: number) => void }`, so in most cases there won't be a problem. Just you have to be careful while using replace. For eg `set({ bears: 0 }, true)` would compile but will be unsound as it'll delete the `increase` function. (If you set from "outside" ie `useStore.setState({ bears: 0 }, true)` then it won't compile because the "outside" store knows that `increase` is missing.) Another instance where you should be careful you're doing `Object.keys`, `Object.keys(get())` will return `["bears", "increase"]` and not `["bears"]` (the return type of `get` can make you fall for this).
|
||||
|
||||
So `combine` trades-off a little type-safety for the convience of not having to write a type for state. Hence you should use `combine` accordingly, usually it's not a big deal and it's okay to use it.
|
||||
So `combine` trades-off a little type-safety for the convenience of not having to write a type for state. Hence you should use `combine` accordingly, usually it's not a big deal and it's okay to use it.
|
||||
</details>
|
||||
|
||||
Also note that we're not using the curried version when using `combine` because `combine` "creates" the state. When using a middleware that creates the state, it's not necessary to use the curried version because the state now can be inferred. Another middleware that creates state is `redux`. So when using `combine`, `redux` or any other custom middleware that creates the state, it's not recommended to use the curried version.
|
||||
@ -184,7 +184,7 @@ const foo = (f, bar) => (set, get, store) => {
|
||||
}
|
||||
|
||||
const useStore = create(foo(() => ({ bears: 0 }), "hello"))
|
||||
console.log(store.foo.toUpperCase())
|
||||
console.log(useStore.foo.toUpperCase())
|
||||
```
|
||||
|
||||
Yes, if you didn't know Zustand middlewares do and are allowed to mutate the store. But how could we possibly encode the mutation on the type-level? That is to say how could do we type `foo` so that this code compiles?
|
||||
@ -223,7 +223,7 @@ const loggerImpl: LoggerImpl = (f, name) => (set, get, store) => {
|
||||
set(...a)
|
||||
console.log(...(name ? [`${name}:`] : []), get())
|
||||
}
|
||||
store.setState = loggedState
|
||||
store.setState = loggedSet
|
||||
|
||||
return f(loggedSet, get, store)
|
||||
}
|
||||
@ -296,7 +296,7 @@ type Cast<T, U> =
|
||||
// ---
|
||||
|
||||
const useStore = create(foo(() => ({ bears: 0 }), "hello"))
|
||||
console.log(store.foo.toUpperCase())
|
||||
console.log(useStore.foo.toUpperCase())
|
||||
```
|
||||
|
||||
### `create` without curried workaround
|
||||
|
||||
@ -53,7 +53,7 @@ function Controls() {
|
||||
* Simple and un-opinionated
|
||||
* Makes hooks the primary means of consuming state
|
||||
* Doesn't wrap your app in context providers
|
||||
* [Can inform components transiently (without causing render)](#transient-updates-for-often-occuring-state-changes)
|
||||
* [Can inform components transiently (without causing render)](#transient-updates-for-often-occurring-state-changes)
|
||||
|
||||
### Why zustand over context?
|
||||
|
||||
@ -198,7 +198,7 @@ const unsub5 = useStore.subscribe(state => state.paw, console.log, { fireImmedia
|
||||
|
||||
## Using zustand without React
|
||||
|
||||
Zustands core can be imported and used without the React dependency. The only difference is that the create function does not return a hook, but the api utilities.
|
||||
Zustand core can be imported and used without the React dependency. The only difference is that the create function does not return a hook, but the api utilities.
|
||||
|
||||
```jsx
|
||||
import create from 'zustand/vanilla'
|
||||
@ -218,7 +218,7 @@ const useStore = create(vanillaStore)
|
||||
|
||||
:warning: Note that middlewares that modify `set` or `get` are not applied to `getState` and `setState`.
|
||||
|
||||
## Transient updates (for often occuring state-changes)
|
||||
## Transient updates (for often occurring state-changes)
|
||||
|
||||
The subscribe function allows components to bind to a state-portion without forcing re-render on changes. Best combine it with useEffect for automatic unsubscribe on unmount. This can make a [drastic](https://codesandbox.io/s/peaceful-johnson-txtws) performance impact when you are allowed to mutate the view directly.
|
||||
|
||||
@ -350,7 +350,7 @@ const useStore = create(devtools(redux(reducer, initialState)))
|
||||
|
||||
devtools takes the store function as its first argument, optionally you can name the store or configure [serialize](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#serialize) options with a second argument.
|
||||
|
||||
Name store: `devtools(store, {name: "MyStore"})`, which will create a seperate instance named "MyStore" in the devtools.
|
||||
Name store: `devtools(store, {name: "MyStore"})`, which will create a separate instance named "MyStore" in the devtools.
|
||||
|
||||
Serialize options: `devtools(store, { serialize: { options: true } })`.
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user