Installation

pnpm dlx uselab@latest add use-tiny-redux

Usage

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>
  )
}

API Reference

Store: 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
}

Parameters

Return value

Hook: useTinyRedux(store, options?)

Parameters

Return value

useTinyRedux returns an object that keeps your component in sync with the store:

Types

interface UseTinyReduxOptions<TState> {
  selector?: (state: TState) => unknown
}

Notes

• The store is intentionally tiny: no reducers, actions, or middleware—just { get, set, subscribe }.
• useTinyRedux is built on useSyncExternalStore, making it safe for concurrent React and avoiding tearing.
• You can create multiple stores for different concerns (e.g., counterStore, themeStore) without any providers.
• For more complex apps, treat this as a building block: you can wrap it with typed actions or domain-specific hooks.