zustand-vault
v1.1.0
Published
zustand-vault is a helper library built on top of zustand for creating and accessing multiple stores in an application.
Downloads
3
Maintainers
Readme
zustand-vault
zustand-vault is a helper library built on top of zustand for creating and accessing multiple stores in an application.
It provides a central access point for all the stores and simplifies the state management process.
The library is designed to work with TypeScript and provides a clean API for accessing and managing state.
Installation
To use 'zustand-vault', you need to install it first. You can install it via npm or yarn. Here are the commands for both:
npm install zustand zustand-vault
yarn add zustand zustand-vault
Getting started
To use 'zustand-vault', you need to create a store first. You can create a store by using the storeBuilder
function.
Here's an example:
import { storeBuilder } from 'zustand-vault';
type VaultStore = {
counter: {
counter: number;
increment(): void;
decrement(): void;
};
};
const store = storeBuilder<VaultStore>()
.set('counter', ({ set }) => ({
counter: 0,
increment: () => set((state) => ({ counter: state.counter + 1 })),
decrement: () => set((state) => ({ counter: state.counter - 1 })),
}))
.get();
In this example, we create a store with a counter property that has an initial value of 0 and two methods to increment and decrement the counter.
To use the store, you can create a Vault
instance by using the createVault
function and pass the store to it.
Here's an example:
import { createVault } from 'zustand-vault';
const vault = createVault(store);
Now, you can use the useStore
method of the Vault
instance to get the state and methods of the store.
Here's an example:
import { createVault } from 'zustand-vault';
const vault = createVault(store);
function MyComponent() {
const { counter, increment, decrement } = vault.useStore('counter');
return (
<div>
<p>Counter: {counter}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
}
Example code
Here's an example code that uses 'zustand-vault' to create a store with multiple properties:
import { createVault, storeBuilder } from 'zustand-vault';
type VaultStore = {
counter: {
counter: number;
increment(): void;
decrement(): void;
};
toast: {
visible: boolean;
show(): void;
hide(): void;
toggle(): void;
};
};
const store = storeBuilder<VaultStore>()
.set('counter', ({ set }) => ({
counter: 0,
increment: () => set((state) => ({ counter: state.counter + 1 })),
decrement: () => set((state) => ({ counter: state.counter - 1 })),
}))
.set('toast', ({ set }) => ({
visible: false,
show: () => set({ visible: true }),
hide: () => set({ visible: false }),
toggle: () => set((state) => ({ visible: !state.visible })),
}))
.get();
const vault = createVault(store);
function MyComponent() {
const { counter, increment, decrement } = vault.useStore('counter');
const { visible, toggle } = vault.useStore('toast');
useEffect(() => {
console.log('getState():', vault.store('toast').getState().visible);
return vault.store('toast').subscribe((state) => {
console.log('state changed:', state.visible);
});
}, []);
return (
<div>
<p>Counter: {counter}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
<p>Toast: {visible ? 'Visible' : 'Hidden'}</p>
<button onClick={toggle}>Toggle</button>
</div>
);
}