zustand-computed-state

zustand-computed-state 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

1yarn add zustand-computed-state
2npm install zustand-computed-state
3pnpm add zustand-computed-state

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.

1import { computed, compute } from 'zustand-computed-state';
2
3const useStore = create(
4  computed((set, get) => ({
5    count: 1,
6    inc: () => set(state => ({ count: state.count + 1 })),
7    dec: () => set(state => ({ count: state.count - 1 })),
8    // get() function has access to computed states
9    square: () => set(() => ({ count: get().countSq })),
10    root: () => set(state => ({ count: Math.floor(Math.sqrt(state.count)) })),
11
12    ...compute(get, state => ({
13      countSq: state.count ** 2,
14    })),
15  }))
16);

With types, the previous example would look like this:

1import { computed } from 'zustand-computed-state';
2
3type Store = {
4  count: number;
5  inc: () => void;
6  dec: () => void;
7  countSq: number;
8};
9
10const useStore = create<Store>()(
11  computed((set, get) => ({
12    count: 1,
13    inc: () => set(state => ({ count: state.count + 1 })),
14    dec: () => set(state => ({ count: state.count - 1 })),
15    square: () => set(() => ({ count: get().countSq })),
16    root: () => set(state => ({ count: Math.floor(Math.sqrt(state.count)) })),
17    ...compute(get, state => ({
18      countSq: state.count ** 2,
19    })),
20  }))
21);

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

1function Counter() {
2  const { count, countSq, inc, dec } = useStore();
3  return (
4    <div>
5      <span>{count}</span>
6      <br />
7      <span>{countSq}</span>
8      <br />
9      <button onClick={inc}>+1</button>
10      <button onClick={dec}>-1</button>
11    </div>
12  );
13}

With Getters Pattern

Here's an example with the Getters Pattern

1const useStore = create<Store>()(
2  devtools(
3    computed((set, get) =>
4      compute<Store>({
5        count: 1,
6        inc: () => set(prev => ({ count: prev.count + 1 })),
7        dec: () => set(state => ({ count: state.count - 1 })),
8        get countSq() {
9          return this.count ** 2;
10        },
11      })
12    )
13  )
14);

With Middleware

Here's an example with the Immer middleware.

1const useStore = create<Store>()(
2  devtools(
3    computed(
4      immer((set, get) => ({
5        count: 1,
6        inc: () =>
7          set(state => {
8            // example with Immer middleware
9            state.count += 1;
10          }),
11        dec: () => set(state => ({ count: state.count - 1 })),
12        ...compute(get, state => ({
13          countSq: state.count ** 2,
14        })),
15      }))
16    )
17  )
18);

With Slice Pattern

Only difference is sending an ID to compute function to separate computed states for each slide.

1- ...compute(get, state=>({xSq: state.x **2 }))
2+ ...compute('x_slice', get, state=>({xSq: state.x **2 }))

1type XSlice = {
2  x: number;
3  xSq: number;
4  incX: () => void;
5};
6
7type YSlice = {
8  y: number;
9  ySq: number;
10  incY: () => void;
11};
12
13type Store = YSlice & XSlice;
14
15const createCountSlice: StateCreator<Store, [], [], YSlice> = (set, get) => ({
16  y: 1,
17  incY: () => set(state => ({ y: state.y + 1 })),
18  ...compute('y_slice', get, state => ({
19    ySq: state.y ** 2,
20  })),
21});
22
23const createXySlice: StateCreator<Store, [], [], XSlice> = (set, get) => ({
24  x: 1,
25  incX: () => set(state => ({ x: state.x + 1 })),
26  ...compute('x_slice', get, state => ({
27    xSq: state.x ** 2,
28  })),
29});
30
31const store = create<Store>()(
32  computed((...a) => ({
33    ...createCountSlice(...a),
34    ...createXySlice(...a),
35  }))
36);