ausg-zustand
v0.0.5
Published
Actions unpacker and selector generator for zustand
Downloads
1
Readme
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