mirror of
https://github.com/pmndrs/zustand.git
synced 2025-12-08 19:45:52 +00:00
Added docs page: flux inspired practice (#1074)
* Added base version of wiki file * Updated the example to a more understandable one * More content added to "flux-like-practices" * Revert "Updated the example to a more understandable one" This reverts commit 629c8d0891e690e139bdb446f3ba76bc81cd98c1. * run prettier Co-authored-by: daishi <daishi@axlight.com>
This commit is contained in:
parent
8e2445cc2a
commit
7470e9c6e8
54
docs/flux-inspired-practice.md
Normal file
54
docs/flux-inspired-practice.md
Normal file
@ -0,0 +1,54 @@
|
||||
# Flux inspired practice
|
||||
|
||||
Although zustand is an unopinionated library, here's one of the recommended usages:
|
||||
|
||||
- Create one single store
|
||||
- Define a store only with `set`
|
||||
- Define dispatch functions at the root level of the store to update one or more store slices
|
||||
|
||||
```js
|
||||
const useStore = create((set) => ({
|
||||
storeSliceA: ...,
|
||||
storeSliceB: ...,
|
||||
storeSliceC: ...,
|
||||
dispatchX: () => set(...),
|
||||
dispatchY: () => set(...),
|
||||
}))
|
||||
```
|
||||
|
||||
See [Splitting the store into separate slices](https://github.com/pmndrs/zustand/blob/main/docs/typescript.md#interdependent-slices-pattern) for how to define a store with separate slices.
|
||||
|
||||
## Flux like patterns / "Dispatching" actions
|
||||
|
||||
If you can't live without redux-like reducers, you can define a `dispatch` function on the root level of the store like store
|
||||
|
||||
```typescript
|
||||
const types = { increase: 'INCREASE', decrease: 'DECREASE' }
|
||||
|
||||
const reducer = (state, { type, by = 1 }) => {
|
||||
switch (type) {
|
||||
case types.increase:
|
||||
return { grumpiness: state.grumpiness + by }
|
||||
case types.decrease:
|
||||
return { grumpiness: state.grumpiness - by }
|
||||
}
|
||||
}
|
||||
|
||||
const useStore = create((set) => ({
|
||||
grumpiness: 0,
|
||||
dispatch: (args) => set((state) => reducer(state, args)),
|
||||
}))
|
||||
|
||||
const dispatch = useStore((state) => state.dispatch)
|
||||
dispatch({ type: types.increase, by: 2 })
|
||||
```
|
||||
|
||||
Or, just use our redux-middleware. It wires up your main-reducer, sets initial state, and adds a dispatch function to the state itself and the vanilla api. Try [this](https://codesandbox.io/s/amazing-kepler-swxol) example.
|
||||
|
||||
```typescript
|
||||
import { redux } from 'zustand/middleware'
|
||||
|
||||
const useStore = create(redux(reducer, initialState))
|
||||
```
|
||||
|
||||
Another way to update the store could be in functions wrapping the state functions. These could also handle side-effects of actions, for example for HTTP-calls. For using Zustand in a none-reactive way see [the readme](https://github.com/pmndrs/zustand#readingwriting-state-and-reacting-to-changes-outside-of-components)
|
||||
Loading…
x
Reference in New Issue
Block a user