zustand-middleware-computed: A Zustand middleware for adding computed state

Features

• Computed state will only be recalculated when the properties they depend on are updated.
• Computed state support referencing other computed state (in accordance with some rule).

Usage

1yarn add zustand-middleware-computed

Example

1import create from 'zustand'
2import computed  from 'zustand-middleware-computed'
3
4interface ComputedState {
5  threeBears: number;
6  threeCats: number;
7  animalsCount:number;
8}
9const useBearStore = create(
10  computed<Store, ComputedState>((
11    (set) => ({
12      bears: 0,
13      cats: 0,
14      addOneBear: () => set(state => ({ bears: state.bears + 1 })),
15      addOneCat: () => set(state => ({ cats: state.cats + 1 })),
16    })),
17    {
18      threeBears: (state) => {
19        console.log('threeBears recomputed');
20        return state.bears * 3 + 1
21      },
22      threeCats: (state) => {
23        console.log('threeCats recomputed');
24        return state.cats * 3
25      },
26    }
27  ));

License

MIT