@acoolhq/react-tiny-store

Appearance

@acoolhq/react-tiny-store

@acoolhq/react-tiny-store / createContextSync

Function: createContextSync() ​

createContextSync<T>(): object

Defined in: createContextSync.tsx:42

Creates a typed Context wrapper around an internal store.

Type Parameters ​

T ​

T

Root state shape.

Returns ​

An object with:

  • Provider: <Provider initial>{children}</Provider>
  • useSelector(selector, isEqual?)
  • useActions(factory, deps?)
  • bindActions(factory) -> (deps?) => actions
  • createSlice(select, fns) -> () => { state, get, actions }

bindActions() ​

bindActions: <A>(factory) => (deps) => A

Bind a controller factory to the context store and get a hook.

Type Parameters ​

A ​

A

Actions shape.

Parameters ​

factory ​

(api) => A

Returns ​

(deps?) => A

(deps): A

Parameters ​
deps ​

any[] = []

Returns ​

A

createSlice() ​

createSlice: <S, FNS>(select, fns) => () => object

Create a pure slice hook from the context store. Actions must be pure updaters that return the next root state.

Type Parameters ​

S ​

S

Selected slice.

FNS ​

FNS extends RootFns<T>

Pure updater map (root, ...args) => nextRoot.

Parameters ​

select ​

(root) => S

fns ​

FNS

Returns ​

() => { state, get, actions }

(): object

Returns ​

object

actions ​

actions: Bound<FNS>

get() ​

get: () => S

Returns ​

S

state ​

state: S

Provider() ​

Provider: (__namedParameters) => Element

Parameters ​

__namedParameters ​
children ​

ReactNode

initial ​

T

Returns ​

Element

useActions() ​

useActions: <A>(factory, deps) => A

Build controller actions (side-effects/async allowed) from the context store.

Type Parameters ​

A ​

A

Actions shape.

Parameters ​

factory ​

(api) => A

(api) => actions

deps ​

any[] = []

Memo deps for the returned actions.

Returns ​

A

Actions A (controller actions).

useSelector() ​

useSelector: <S>(selector, isEqual) => S

Selects a derived value from the context store with granular re-renders.

Type Parameters ​

S ​

S

Selected slice shape.

Parameters ​

selector ​

(root) => S

Pure selector (root) => slice.

isEqual ​

(a, b) => boolean

Optional equality to suppress updates (default Object.is).

Returns ​

S

The selected value S, updated only when isEqual(prev, next) is false.

Example ​

ts
type AppState = { tick: number; todos: { id: string; text: string }[] };
const Tiny = createContextSync<AppState>();

function App() {
  return (
    <Tiny.Provider initial={{ tick: 0, todos: [] }}>
      <UI />
    </Tiny.Provider>
  );
}