A lightweight, type-safe vanilla JS state management library
npm install @runicjs/runiccreateStore
mergeState
resetState
updateState & updateStates)
updateState & updateStates)
js
import { createStore } from '@runicjs/runic';
// Create a store with initial state
const counterStore = createStore({ count: 0 });
// Get the current state
console.log('Current count:', counterStore.getState().count);
// Subscribe to changes
const unsubscribe = counterStore.subscribe((state) => {
console.log('New count:', state.count);
});
// Update state (changes are made immutably via Immer)
updateState(counterStore, (state) => {
state.count += 1;
});
// No more state updates.
unsubscribe();
// Overwrite the entire state
const storedState = JSON.parse(localStorage.getItem('counter-store'));
counterStore.setState(storedState);
// Reset the store to the initial state
resetState(counterStore);
`
$3
`ts
type Todo = { id: number; text: string; done: boolean };
type Todos = Array;
const todosStore = createStore([]);
// Write simple functions to update your stores.
function addTodo(newTodo: Todo) {
updateState(todosStore, (todos) => {
todos.push(newTodo);
});
}
addTodo({ id: 1, text: 'Learn Runic', done: false });
`
$3
`ts
import { updateStates } from '@runicjs/runic/integrations/immer';
// Create as many stores as you want.
const userStore = createStore({ credits: 100 });
const inventoryStore = createStore(['potion']);
// Update multiple stores at once.
updateStates([userStore, inventoryStore], ([user, inventory]) => {
user.credits -= 50;
inventory.push('sword');
});
``