define-zustand

Quickly define zustand state. Supports defining computed properties.

Install

1pnpm i define-zustand
2npm i define-zustand

Use

1import { defineStore, defineContext, defineStateFactory } from 'define-zustand'
2
3/**
4 * @return zustand hooks
5 */
6const useStore = defineStore({
7    state: () => ({
8        a: 1,
9        b: 1
10    }),
11    action: () => ({}),
12    getter: {
13        count: state => state.a + state.b
14    }
15})
16
17// Use defineModelFactory
18const stateFactory = defineStateFactory({
19    state: () => ({
20        a: 1,
21        b: 1
22    }),
23    action: () => ({}),
24    getter: {
25        count: state => state.a + state.b
26    }
27})
28const useStore = defineStore(stateFactory())
29const { Provider, useContext } = defineContext(stateFactory())
30
31function Child() {
32    const count = useContext(state => state.count)
33    return <div>{count}</div>
34}
35function ReactComponent() {
36    const count = useStore(state => state.count)
37    const setState = useStore(state => state.setState)
38    const reset = useStore(state => state.reset)
39
40    useEffect(() => {
41        return () => {
42            reset()
43        }
44    }, [])
45
46    return (
47        <Provider>
48            <div>
49                <button onClick={() => setState({ a: 2 })}>setA</button>
50                <button
51                    onClick={() =>
52                        setState(state => {
53                            state.b += 1
54                        })
55                    }
56                >
57                    setB
58                </button>
59                <div>{count}</div>
60            </div>
61            <Child />
62        </Provider>
63    )
64}