Four action patterns with TypeScript type inference

[dai-shi]

combine

https://tsplay.dev/m3G13m

import { create } from "zustand";
import { combine } from "zustand/middleware";

export const useCounterStore = create(
  combine(
    {
      count: 0,
    },
    (set) => ({
      increase: (by: number) => set((state) => ({ count: state.count + by })),
    }),
  ),
);

zustand-slices

https://tsplay.dev/wXd4Ow

import { create } from "zustand";
import { createSlice, withSlices } from "zustand-slices";

const countSlice = createSlice({
  name: "count",
  value: 0,
  actions: {
    increase: (by: number) => (prev) => prev + by,
  },
});

export const useCounterStore = create(withSlices(countSlice));

zustand-valtio

https://tsplay.dev/wOdjlN

import { create } from "zustand";
import { withProxy } from "zustand-valtio";

export const useCounterStore = create(
  withProxy({
    count: 0,
    increase(by: number) {
      this.count += by;
    },
  }),
);

zustand-xs

https://tsplay.dev/w1qOkw

import { create } from "zustand";
import { xs } from "zustand-xs";

export const useCounterStore = create(
  xs(
    {
      count: 0,
    },
    {
      increase: (state, event: { by: number }) => ({
        count: state.count + event.by,
      }),
    },
  ),
);

[dai-shi]

Poll: https://x.com/dai_shi/status/1822068561797640458

Similar discussion: #2647