The most intuitive and pratical React state management library, built on top of Zustand.
npm install @davstack/store.get / .set / .use / .onChange methods are inferred.
createStoreContext helper.
bash
npm install @davstack/store
`
Visit the Davstack Store Docs for more information and examples, such as this todo app example.
Demo Usage
$3
`tsx
import { store } from '@davstack/store';
const counterStore = store(0);
function Counter() {
// re-renders when count changes
const count = counterStore.use();
return Count: {count};
}
function Controls() {
return (
);
}
// Generated types
const counterStore: StoreApi;
`
$3
`tsx
import { store } from '@davstack/store';
const counterStore = store()
.state({ count: 0 })
.actions((store) => ({
increment: () => store.count.set(store.count.get() + 1),
decrement: () => store.count.set(store.count.get() - 1),
}))
.computed((store) => ({
doubleCount: () => store.count.use() * 2,
}))
.effects((store) => ({
logChanges: () => store.onChange(console.log),
}));
function Counter() {
const count = counterStore.count.use();
return Count: {count};
}
function DoubleCounter() {
const doubleCount = counterStore.doubleCount.use();
return Double Count: {doubleCount};
}
function Controls() {
return ;
}
// Generated types
const counterStore: StoreApi<
{ count: number },
{
increment: () => void;
decrement: () => void;
} & ComputedMethods<{
doubleCount: () => number;
}> & EffectMethods<{
logChanges: () => UnsubscribeFn;
}>;
>;
`
Note: store(initialState) and store.state(initialState) are equivalent, it's just a matter of preference.
$3
- Typesafe get/set/use/onChange/assign methods are generated for all deeply nested state properties.
- All methods are generated lazily, so there are no performance issues even with large complex stores.
`tsx
import { store } from '@davstack/store';
const userStore = store({
name: 'John',
age: 25,
address: {
street: '123 Main St',
city: 'Anytown',
},
});
function UserProfile() {
// only re-renders when name changes
const name = userStore.name.use();
return (
Name: {name}
);
}
function AddressForm() {
const userAddress = userStore.address.use();
return (
);
}
``