https://github.com/sungchuni/zustand-stateful-getter

✨ Leave zustand object getter alive.
https://github.com/sungchuni/zustand-stateful-getter

Last synced: about 1 month ago
JSON representation

✨ Leave zustand object getter alive.

• Host: GitHub
• URL: https://github.com/sungchuni/zustand-stateful-getter
• Owner: sungchuni
• License: apache-2.0
• Created: 2023-04-23T04:54:24.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-04-24T16:21:54.000Z (over 1 year ago)
• Last Synced: 2024-10-01T00:43:26.466Z (about 2 months ago)
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/zustand-stateful-getter
• Size: 78.1 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# zustand-stateful-getter

Leave zustand object getter alive.

## Installation

```bash

npm install zustand-stateful-getter

```

`zustand@^4.3.7` is peer dependency.

## Usage

Provides a near-complete transparent API.

```js

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

```js

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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) trap.

With `subscribe` API and the [subscriptionsWithSelector middleware](https://github.com/pmndrs/zustand#using-subscribe-with-selector) 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?"](https://caniuse.com/?search=Proxy).