A observer-based state manager for React
npm install react-store-light> ⚠️ Version 2.x introduces breaking changes compared to 1.x
> See CHANGELOG.md for details.
for v1x see READMEv1.md
useStore(key) hook.
bash
npm install react-store-light
`
or
`bash
pnpm add react-store-light
`
---
API
This library provides a slice-based, context-driven state management API with built-in async
support.
$3
Creates an isolated slice definition. Each slice owns its own store identity and can be
instantiated multiple times.
- returns:
- createStore (initData) - creates a store instance with uniq id for this slice.
- returns:
- store - store with api
- useState (key, [Context]) subscribes a component to a single store field by key.
- returns:
- [value, setValue] = analog React.useState
- features:
- key that was assigned during initialization will be used, you cannot change it
- useAsync (key, async callback, [Context]) return {dispatch, value, abort()} - subscribes a
component to a single async store field by key.
- returns:
- dispatch - runs asynchronous callback
- value - async store field
- abort - abort the callback if the callback has not yet returned the result.
- features:
- key that was assigned during initialization will be used, you cannot change it
- async function callback signature like Promise callback
- (resolve, reject) => void | Promise
- useStore ([Context]) - returns the store for imperative access.
- returns:
- store - store with api
- useReducer([Context]) return -
- returns:
- reducer is a function that describes a deterministic state transition. Reducers may mutate the store via its API instead of returning a new state. function reducer signature is:
- (store, ...custom args) => void
$3
Creates a React Context.
- returns:
- Context - React Context optional used by:
- createSlice
- useState
- useAsync
- useStore
$3
Creates a Provider for injecting stores.
- returns:
- Provider - Registers store instances in the React tree.
- props:
- children: ReactNode
- value: Store[]
- value — array of store instances
- features:
- each store must have a unique uniqId
- duplicate stores will throw a runtime error
$3
- asyncInit - сreates an initial async state
- asyncPending - creates a pending async state
- asyncFulfilled - creates a fulfilled async state
- asyncError - creates a rejected async state
- createTypedPromise(cb) - wraps a Promise executor and always resolves to an async value
- cb function signature promise like (resolve, reject) => void
#### Types
- type IAsync\ - represents an async value stored in the store.
- V - value type
- E - error type
- type IAsyncValue\ - infers the value type from IAsync.
- type IAsyncError\ - infers the error type from IAsync.
- type IStoreApi - Store API provided by observable-store-light.
---
Quick Start
`ts
import { createSlice, createContext, createProvider } from 'react-store-light';
type Slice = { count: number };
const Context = createContext();
const { createStore, useState } = createSlice(Context);
const Provider = createProvider(Context)
const store = createStore({ count: 1 });
`
$3
Add Provider to React tree and Componentwith selector
`tsx
const Counter = () => {
const [count, setCount] = store.useState('count');
return ;
};
const ProviderComponent = () => {
return (
);
};
`
---
$3
`ts
const currentCount = store.get('count');
store.set('count', currentCount + 1);
`
---
$3
Listeners are useful for reacting to state changes without triggering renders (e.g. syncing to
localStorage, logging, analytics).
`ts
store.addListener('count', (key, value) => {
console.log(${key} changed to, value);
});
store.removeListener('count', listener);
`
---
$3
`ts
const authStore = createStore({
isAuthenticated: false,
});
const settingsStore = createStore({
theme: 'dark',
});
``