zustand-stateful-getter
Leave zustand object getter alive.
Installation
npm install zustand-stateful-getterzustand@^4.3.7 is peer dependency.
Usage
Provides a near-complete transparent API.
import { createStore } from 'zustand/vanilla'
import { statefulGetter } from 'zustand-stateful-getter'
const nameStore = createStore(
statefulGetter(
(set) => ({
firstName: 'John',
lastName: 'Doe',
get fullName() {
return `${this.firstName} ${this.lastName}`
},
setFirstName: (firstName) => set({ firstName }),
setLastName: (lastName) => set({ lastName }),
})
)
)
pizzaStore.getState().fullName // 'John Doe'
pizzaStore.getState().setFirstName('Jane')
pizzaStore.getState().fullName // 'Jane Doe'Why?
See https://github.com/pmndrs/zustand/issues/132
import { createStore } from 'zustand/vanilla'
const nameStore = createStore(
(set) => ({
firstName: 'John',
lastName: 'Doe',
get fullName() {
return `${this.firstName} ${this.lastName}`
},
setFirstName: (firstName) => set({ firstName }),
setLastName: (lastName) => set({ lastName }),
})
)
pizzaStore.getState().fullName // 'John Doe'
pizzaStore.getState().setFirstName('Jane')
pizzaStore.getState().fullName // 'John Doe', not 'Jane Doe'The fullName getter is not updated after setFirstName is called. This is because the getter is not a part of the state, and the state is not updated. zustand-statuful-getter solves this problem by Proxy trap.
With subscribe API and the subscriptionsWithSelector middleware could be a solution, but the desire to write store layouts declaratively led to the creation of this middleware.
Disclaimer
It is recommended that the getter body be written without conditionals. See https://github.com/sungchuni/detective-getter-deps#disclaimer
It relies heavily on the Proxy class, so you couldn't use it with versions of the JavaScript engine that don't have a Proxy implementation. Always consult the "Can I use Proxy?".