zustand-computed

zustand-computed

zustand-computed is a lightweight, TypeScript-friendly middleware for the state management system Zustand. It's a simple layer which adds a transformation function after any state change in your store.

Install

yarn add zustand-computed

Usage

The middleware layer takes in your store creation function and a compute function, which transforms your state into a computed state. It does not need to handle merging states.

import computed from 'zustand-computed';

const computeState = (state) => ({
    countSq: state.count ** 2,
})

const useStore = create(
    computed((set) => ({
        count: 1,
        inc: () => set((state) => ({ count: state.count + 1 })),
        dec: () => set((state) => ({ count: state.count - 1 }))
    }), computeState)
)

With types, the previous example would look like this:

import computed from 'zustand-computed';

type Store = {
    count: number,
    inc: () => void,
    dec: () => void
}

type ComputedStore = {
    countSq: number
}

const computeState = (state: Store): ComputedStore => ({
    countSq: state.count ** 2
})

const useStore = create<Store, [["chrisvander/zustand-computed", ComputedStore]]>(
    computed((set) => ({
        count: 1,
        inc: () => set((state) => ({ count: state.count + 1 })),
        dec: () => set((state) => ({ count: state.count - 1 }))
    }), computeState)
)

The store can then be used as normal in a React component or via the Zustand API.

function Counter() {
    const { count, countSq, inc, dec } = useStore()
    return (
        <div>
            <span>{count}</span><br />
            <span>{countSq}</span><br />
            <button onClick={inc}>+1</button>
            <button onClick={dec}>-1</button>
        </div>
    )
}

A fully-featured example can be found under the "example" directory.