YoltraYoltra
TSPy

useAtomicProps

function
react/src/hooks/hooks.ts:297

Overload 1

signature
useAtomicProps<R, S, T>(specs, selector, isEqual?): T

**Multi-path** fine-grained selector. Subscribes to several reducer.property paths (supports deep & wildcard) and recomputes selector(state) when any of them change.

Type parameters

NameTypeDescription
Rextends stringSlice name union.
Sextends Record<R, any>State record keyed by R.
T—Derived value type.

Parameters

NameTypeDescription
specs{ property: OneOrMany<WithGlob<Dotted<S[R]>>>; reducer: R }[]Array of { reducer, property }, where property can be a string or array of strings. Supports */**.
NameTypeDescription
selector(state: DeepReadonly<S>) => T(state) => T function run against the full state.
NameTypeDescription
isEqual?(a: T, b: T) => booleanEquality comparator for the derived value (defaults to Object.is).

Returns

T

Example

example
const total = useAtomicProps<'todos' | 'filter', AppState, number>(
  [
    { reducer: 'todos',  property: 'items.**' },
    { reducer: 'filter', property: 'q' }
  ],
  (s) => s.todos.items.filter(x => x.title.includes(s.filter.q)).length
);

Overload 2

signature
useAtomicProps<R, S, T>(specs, selector, isEqual?): T

**Multi-path** fine-grained selector. Subscribes to several reducer.property paths (supports deep & wildcard) and recomputes selector(state) when any of them change.

Type parameters

NameTypeDescription
Rextends stringSlice name union.
Sextends Record<R, any>State record keyed by R.
T—Derived value type.

Parameters

NameTypeDescription
specs{ property: OneOrMany<string>; reducer: R }[]Array of { reducer, property }, where property can be a string or array of strings. Supports */**.
NameTypeDescription
selector(state: DeepReadonly<S>) => T(state) => T function run against the full state.
NameTypeDescription
isEqual?(a: T, b: T) => booleanEquality comparator for the derived value (defaults to Object.is).

Returns

T

Example

example
const total = useAtomicProps<'todos' | 'filter', AppState, number>(
  [
    { reducer: 'todos',  property: 'items.**' },
    { reducer: 'filter', property: 'q' }
  ],
  (s) => s.todos.items.filter(x => x.title.includes(s.filter.q)).length
);