Loading...
Please waitLoading...
Please waitMinimal global store for your component tree with get, set, and subscribe, wired into React via useSyncExternalStore.
pnpm dlx uselab@latest add use-tiny-redux
import * as React from "react"
import { createTinyReduxStore, useTinyRedux } from "@/hooks/use-tiny-redux"
type AppState = { count: number }
const counterStore = createTinyReduxStore<AppState>({ count: 0 })
export function Counter() {
const { state, set } = useTinyRedux(counterStore)
return (
<button onClick={() => set((prev) => ({ count: prev.count + 1 }))}>
Clicked {state.count} times
</button>
)
}createTinyReduxStore(initialState)Creates a tiny global store with the classic Redux-style API:
type TinyReduxStore<TState> = {
get: () => TState
set: (updater: TState | ((prev: TState) => TState)) => void
subscribe: (listener: () => void) => () => void
}| Name | Type | Description |
|---|---|---|
initialState | TState | Initial state for the store. |
| Name | Type | Description |
|---|---|---|
store | TinyReduxStore<TState> | Store exposing { get, set, subscribe }. |
useTinyRedux(store, options?)| Name | Type | Description | Optional |
|---|---|---|---|
store | TinyReduxStore<TState> | Store created via createTinyReduxStore. | No |
options | UseTinyReduxOptions<TState> | Configuration for derived state. | Yes |
selector | (state: TState) => unknown | Optional selector to subscribe to a derived slice instead of the whole state. | Yes |
useTinyRedux returns an object that keeps your component in sync with the store:
| Name | Type | Description |
|---|---|---|
state | unknown | TState | Current store value (or selector output, if provided). |
get | () => TState | Direct reference to store.get. |
set | (updater: TState | ((prev: TState) => TState)) => void | Direct reference to store.set. |
subscribe | (listener: () => void) => () => void | Direct reference to store.subscribe. |
interface UseTinyReduxOptions<TState> {
selector?: (state: TState) => unknown
}{ get, set, subscribe }.useTinyRedux is built on useSyncExternalStore, making it safe for concurrent React and avoiding tearing.counterStore, themeStore) without any providers.get, set, and subscribe power, hooked into React via useTinyRedux.Updates propagate to any component using the same tiny store, no context provider required.
Any change here goes through the same tiny store as the counter.
Hello, Ada Lovelace.