3.2.1 • Published 5 months ago

define-zustand v3.2.1

Weekly downloads
-
License
ISC
Repository
-
Last release
5 months ago

define-zustand

Quickly define zustand state

Install

pnpm i define-zustand
npm i define-zustand

Use

import { defineStore, defineContext, defineStateFactory } from 'define-zustand'

/**
 * @return zustand hooks
 */
const useStore = defineStore({
    state: () => ({
        a: 1,
        b: 1
    }),
    action: () => ({}),
    getter: {
        count: state => state.a + state.b
    }
})

// Use defineModelFactory
const stateFactory = defineStateFactory({
    state: () => ({
        a: 1,
        b: 1
    }),
    action: () => ({}),
    getter: {
        count: state => state.a + state.b
    }
})
const useStore = defineStore(stateFactory())
const { Provider, useContext } = defineContext(stateFactory())

function Child() {
    const count = useContext(state => state.count)
    return <div>{count}</div>
}
function ReactComponent() {
    const count = useStore(state => state.count)
    const setState = useStore(state => state.setState)
    const reset = useStore(state => state.reset)

    useEffect(() => {
        return () => {
            reset()
        }
    }, [])

    return (
        <Provider>
            <div>
                <button onClick={() => setState({ a: 2 })}>setA</button>
                <button
                    onClick={() =>
                        setState(state => {
                            state.b += 1
                        })
                    }
                >
                    setB
                </button>
                <div>{count}</div>
            </div>
            <Child />
        </Provider>
    )
}
3.2.1

5 months ago

3.2.0

5 months ago

3.1.1

1 year ago

3.1.0

1 year ago

3.0.4

2 years ago

3.0.3

2 years ago

3.0.2

2 years ago

3.0.1

2 years ago

3.0.0

2 years ago

2.0.1

2 years ago

2.0.0

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago

0.1.0

2 years ago