ausg-zustand v0.0.5

A small library for zustand to reduce amount of files and code in your store.

npm i ausg-zustand --save-dev

Auto selectors generator

First you need to initiate your store, for this use lib function - create, this function return array where first element default zustand store hook and second selector function, next section will show how to use this function

import { create } from 'zustand'
import { create } from "ausg-zustand"

type TParams = {
    bears: 0;
}

type TFunctions = {
    setPopulation: (amount: number) => void;
    increasePopulation: () => void;
}

type TStore = TParams & TFunctions;

export const [useBearStore, getBearStoreSelectors] = create<TStore>((set) => ({
  bears: 0,
  setPopulation: (amount: number) => set((state) => ({ bears: amount })),
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
}))

How to use getSelector function

To get store param or function you need to pass selector function into useStoreHook and choose store param/function that you need

function BearCounter() {
  const bears = useBearStore(getBearStoreSelectors("bears"))
  return <h1>{bears} around here ...</h1>
}

function Controls() {
  const increasePopulation = useBearStore(getBearStoreSelectors("increasePopulation"))
  return <button onClick={increasePopulation}>one up</button>
}

Why it's help

Usually developers create file to store all selectors

// selector.ts

const bears = (state: TStore) => state.bears;
const getSetPopulation = (state: TStore) => state.getSetPopulation;
const getIncreasePopulation = (state: TStore) => state.increasePopulation;

With ausg library you don't need to create selectors by your self, library generate them automatically

Actions unpacker

How actions working without lib

// actions.ts
import type { TSetState } from "ausg-zustand/src/utils/types/store";

const setPopulation = (set: TSetState<TStore>) => (amount: number) => {
    set((state) => ({ bears: amount }));
}

const increasePopulation = (set: TSetState<TStore>) => () => {
    set((state) => ({ bears: state.bears + 1 }))
}

export const actions = {
    setPopulation,
    increasePopulation,
}

import { create } from 'zustand'
import { actions } from './actions'

export const useBearStore = create((set) => ({
  bears: 0,
  setPopulation: actions.setPopulation(set),
  increasePopulation: actions.increasePopulation(set),
}))

Instead of redeclare actions in store like above, you can use lib to make it easier

import { create } from 'zustand'
import { create, unpackActions } from "ausg-zustand"
import { actions } from './actions'

type TParams = {
    bears: 0;
}

type TFunctions = {
    setPopulation: (amount: number) => void;
    increasePopulation: () => void;
}

type TStore = TParams & TFunctions;

export const [useBearStore, getBearStoreSelectors] = create<TStore>((set) => ({
    bears: 0,
    ...unpackActions<TFunctions>(actions, set),
}))

and that's all, no more boilerplate code