auto-zustand-selectors-hook
Enjoy the performance gain of selectors without writing selectors!
Features
- auto generate selectors for Zustand store (be it a value or a function)
- Two styles available
- Fully Typescript support (auto-completion for the generated selectors!)
Install
npm install --save auto-zustand-selectors-hook
Or with yarn:
yarn add auto-zustand-selectors-hook
Notice
The v2
supports Zustand v4
, if you are using a Zustand v3
, please install the v1
version
yarn add auto-zustand-selectors-hook@1.0.1
npm install --save auto-zustand-selectors-hook@1.0.1
Usage
Let's say you have a store like this
interface BearState {
bears: number;
increase: (by: number) => void;
}
const useStoreBase = create<BearState>((set) => ({
bears: 0,
increase: (by) => set((state) => ({ bears: state.bears + by })),
}));
There are two types of selectors you can generate, purely function signature difference, underneath, they are all selectors.
1. For function style ( createSelectorFunctions )
import { createSelectorFunctions } from 'auto-zustand-selectors-hook';
import { create } from 'zustand';
// wrap your store
const useStore = createSelectorFunctions(useStoreBase);
// use it like this!
// useStore.use.blah is a pre-generated selector, yeah!
const TestComponent = () => {
const bears = useStore.use.bears();
const increase = useStore.use.increase();
return (
<>
<span>{bears}</span>
<button
onClick={() => {
increase(1);
}}
>
+
</button>
</>
);
};
2. For hook style ( createSelectorHooks )
import { createSelectorHooks } from 'auto-zustand-selectors-hook';
import { create } from 'zustand';
// wrap your store
const useStore = createSelectorHooks(useStoreBase);
// use it like this!
// useStore.useBlah is a pre-generated selector, yeah!
const TestComponent = () => {
const bears = useStore.useBears();
const increase = useStore.useIncrease();
return (
<>
<span>{bears}</span>
<button
onClick={() => {
increase(1);
}}
>
+
</button>
</>
);
};
3. use with middlewares
You use the middleware for creating the base store, and
ALWAYS
useauto-zustand-selectors-hooks
as a separate wrapper
import { createSelectorHooks } from '../src/index';
import create from 'zustand';
import { persist } from 'zustand/middleware';
const useStoreBase = create<BearState>()(
persist((set) => ({
bears: 0,
increase: (by) => set((state) => ({ bears: state.bears + by })),
}))
);
export const useStore = createSelectorHooks(useStoreBase);
License
MIT © Albert Gao
Credits
It all starts from my feature request Thanks dai-shi for the initial implementation and ideas of API.