vike-react-zustand
This package is not ready for use.
See example.
See also other Vike extensions.
Introduction
How to use vike-react-zustand
Vike-react-zustand is just a wrapper around Zustand, with a few additional features. Redux devtools are enabled by default.
create
Create a store:
import { create } from 'vike-react-zustand'
interface Store {
counter: number
setCounter: (value: number) => void
}
const useStore = create<Store>()((set) => ({
counter: 0,
setCounter(value) {
set((state) => ({
...state,
counter: value
}))
}
}))
withPageContext
Middleware to make pageContext available to the store.
import { create, withPageContext } from 'vike-react-zustand'
interface Store {
user: {
id: string
email: string
}
}
const useStore = create<Store>()(
withPageContext((pageContext) => (set) => ({
user: pageContext.user
}))
)
serverOnly
The function passed to serverOnly() only runs on the server-side, while the state returned by it is available on both the server- and client-side.
import { create, serverOnly } from 'vike-react-zustand'
// We use serverOnly() because process.version is only available on the server-side but we want to be able to access it everywhere (client- and server-side).
const useStore = create<{ nodeVersion: string }>()({
...serverOnly(() => ({
// This function is called only on the server-side, but nodeVersion is available on both the server- and client-side.
nodeVersion: process.version
}))
})
useStoreApi
Sometimes you need to access state in a non-reactive way or act upon the store. For these cases, useStoreApi
can be used.
import { useStoreApi } from 'vike-react-zustand'
import { useStore } from './store'
function Component() {
const api = useStoreApi(useStore)
function onClick() {
api.setState({ ... })
}
}
With immer
import { create } from 'vike-react-zustand'
import { immer } from 'zustand/middleware/immer'
interface Store {
counter: number
setCounter: (value: number) => void
}
const useStore = create<Store>()(
immer((set) => ({
counter: 0,
setCounter(value) {
set((state) => {
state.counter = value
})
}
}))
)