chore(docs): fix typo in docs & code examples (#1006)

This commit is contained in:
InfiniteXyy 2022-06-14 21:06:44 +08:00 committed by GitHub
parent d83c41d312
commit 1011a2fa3c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 8 deletions

View File

@ -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

View File

@ -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 } })`.