Zustand Computed

Another zustand computed middleware

Inspired greatly by https://github.com/cmlarsen/zustand-middleware-computed-state

Features

• Better type definition: built for zustand v4
• On-demand computing: only compute when needed, thanks to proxy-compare
• Cleanup function: useful for promise computed result

Why not improve zustand-middleware-computed-state

zustand-middleware-computed-state API is designed in a different pattern, some features, (cleanup function / on demand computing) are not easy to support.

Usage

Install

1yarn install zustand-computed-middleware zustand@4

Basic Usage

1const useStore = create(
2  computed(
3    () => {
4      return { count: 0, input: "abc" };
5    },
6    {
7      doubled: ({ count }) => count * 2, // will use the cache unless count changes
8      upperCase: ({ input }) => input.toUpperCase(),
9    }
10  )
11);

Cleanup function

1// cleanup
2const useStore = create(
3  computed(
4    () => {
5      return { index: 0 };
6    },
7    {
8      pokemonDetail$: async ({ pokemonIndex }, { addCleanup }) => {
9        const abortController = new AbortController();
10        const abortSignal = abortController.signal;
11        addCleanup(() => abortController.abort());
12        const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonIndex}`, { signal: abortSignal });
13        return await response.json();
14      },
15    }
16  )
17);

TypeScript

If your store has a setter/getter function inside, you should define it explicitly. The definition is not easy.

1type State = { count: number; add: () => void };
2type StateComputed = { doubled: (state: State) => number };
3const useStore = create(
4  computed<State, StateComputed>(
5    (set) => {
6      return { count: 0, add: () => set((s) => ({ count: s.count + 1 })) };
7    },
8    { doubled: (state) => state.count * 2 }
9  )
10);

To make it simpler, you can use it in a curried function way. And it's a workaround for https://github.com/microsoft/TypeScript/issues/10571 (this is also used in zustand v4)

A simple example can be found here codesandbox

1type State = { count: number; add: () => void };
2const useStore = create(
3  computed<State>((set) => {
4    return { count: 0, add: () => set((state) => ({ count: state.count + 1 })) };
5  })({
6    doubled: (state) => state.count * 2,
7  })
8);