useAtomicProp · @yoltra/react

Overload 1

signature

useAtomicProp<R, S, R1, P>(spec): PathValue<S[R1], P>

Fine-grained **single-path** selector for a reducer's state. Re-renders only when the specified reducer.property (dotted path) actually changes. For most applications, prefer using the typed version from createHooks which infers all type parameters automatically. **Supports** - Exact root prop: { reducer: "todo", property: "data" } - Exact deep path: { reducer: "todo", property: "data.123.title" } - Wildcards (pattern): { reducer: "todo", property: "data.*" } or "data.**" **Overloads** - Exact path (no *): returns the precise PathValue when map is omitted - Exact path + map: returns T from map(value) - Glob path (with */**): requires map and returns T from map(state)

Type parameters

Name	Type	Description
`R`	`extends string`
`S`	`extends Record<R, any>`
`R1`	`extends string`
`P`	`extends string`

Parameters

spec — object with:

Name	Type	Description
`property`	`P`
`reducer`	`R1`

Returns

PathValue<S[R1], P>

Example

example

const { useAtomicProp } = createHooks(AppStoreContext);

function TodoTitle({ index }: { index: number }) {
  // Types are inferred — no explicit generics needed
  const title = useAtomicProp({
    reducer: 'todos',
    property: `items.${index}.title`,
  });
  return <span>{title}</span>;
}

Example

example

const title = useAtomicProp<'todos', AppState, 'todos', 'items.0.title'>(
  { reducer: 'todos', property: 'items.0.title' }
);

Example

example

const len = useAtomicProp(
  { reducer: 'todos', property: 'items' },
  items => items.length
);

Example

example

const titles = useAtomicProp(
  { reducer: 'todos', property: 'items.**' },
  state => state.items.map(x => x.title),
  shallowEqual
);

Overload 2

signature

useAtomicProp<R, S, R1, P, T>(spec, map, isEqual?): T

Fine-grained **single-path** selector for a reducer's state. Re-renders only when the specified reducer.property (dotted path) actually changes. For most applications, prefer using the typed version from createHooks which infers all type parameters automatically. **Supports** - Exact root prop: { reducer: "todo", property: "data" } - Exact deep path: { reducer: "todo", property: "data.123.title" } - Wildcards (pattern): { reducer: "todo", property: "data.*" } or "data.**" **Overloads** - Exact path (no *): returns the precise PathValue when map is omitted - Exact path + map: returns T from map(value) - Glob path (with */**): requires map and returns T from map(state)

Type parameters

Name	Type	Description
`R`	`extends string`
`S`	`extends Record<R, any>`
`R1`	`extends string`
`P`	`extends string`
`T`	`—`

Parameters

spec — object with:

Name	Type	Description
`property`	`P`
`reducer`	`R1`

Name	Type	Description
`map`	`(value: PathValue<S[R1], P>) => T`

Name	Type	Description
`isEqual`?	`(a: T, b: T) => boolean`

Returns

T

Example

example

const { useAtomicProp } = createHooks(AppStoreContext);

function TodoTitle({ index }: { index: number }) {
  // Types are inferred — no explicit generics needed
  const title = useAtomicProp({
    reducer: 'todos',
    property: `items.${index}.title`,
  });
  return <span>{title}</span>;
}

Example

example

const title = useAtomicProp<'todos', AppState, 'todos', 'items.0.title'>(
  { reducer: 'todos', property: 'items.0.title' }
);

Example

example

const len = useAtomicProp(
  { reducer: 'todos', property: 'items' },
  items => items.length
);

Example

example

const titles = useAtomicProp(
  { reducer: 'todos', property: 'items.**' },
  state => state.items.map(x => x.title),
  shallowEqual
);

Overload 3

signature

useAtomicProp<R, S, R1, P, T>(spec, map, isEqual?): T

Fine-grained **single-path** selector for a reducer's state. Re-renders only when the specified reducer.property (dotted path) actually changes. For most applications, prefer using the typed version from createHooks which infers all type parameters automatically. **Supports** - Exact root prop: { reducer: "todo", property: "data" } - Exact deep path: { reducer: "todo", property: "data.123.title" } - Wildcards (pattern): { reducer: "todo", property: "data.*" } or "data.**" **Overloads** - Exact path (no *): returns the precise PathValue when map is omitted - Exact path + map: returns T from map(value) - Glob path (with */**): requires map and returns T from map(state)

Type parameters

Name	Type	Description
`R`	`extends string`
`S`	`extends Record<R, any>`
`R1`	`extends string`
`P`	`extends string`
`T`	`—`

Parameters

spec — object with:

Name	Type	Description
`property`	`P`
`reducer`	`R1`

Name	Type	Description
`map`	`(value: any) => T`

Name	Type	Description
`isEqual`?	`(a: T, b: T) => boolean`

Returns

T

Example

example

const { useAtomicProp } = createHooks(AppStoreContext);

function TodoTitle({ index }: { index: number }) {
  // Types are inferred — no explicit generics needed
  const title = useAtomicProp({
    reducer: 'todos',
    property: `items.${index}.title`,
  });
  return <span>{title}</span>;
}

Example

example

const title = useAtomicProp<'todos', AppState, 'todos', 'items.0.title'>(
  { reducer: 'todos', property: 'items.0.title' }
);

Example

example

const len = useAtomicProp(
  { reducer: 'todos', property: 'items' },
  items => items.length
);

Example

example

const titles = useAtomicProp(
  { reducer: 'todos', property: 'items.**' },
  state => state.items.map(x => x.title),
  shallowEqual
);

Overload 4

signature

useAtomicProp<R, S>(spec): unknown

Fine-grained **single-path** selector for a reducer's state. Re-renders only when the specified reducer.property (dotted path) actually changes. For most applications, prefer using the typed version from createHooks which infers all type parameters automatically. **Supports** - Exact root prop: { reducer: "todo", property: "data" } - Exact deep path: { reducer: "todo", property: "data.123.title" } - Wildcards (pattern): { reducer: "todo", property: "data.*" } or "data.**" **Overloads** - Exact path (no *): returns the precise PathValue when map is omitted - Exact path + map: returns T from map(value) - Glob path (with */**): requires map and returns T from map(state)

Type parameters

Name	Type	Description
`R`	`extends string`
`S`	`extends Record<R, any>`

Parameters

spec — object with:

Name	Type	Description
`property`	`string`
`reducer`	`R`

Returns

unknown

Example

example

const { useAtomicProp } = createHooks(AppStoreContext);

function TodoTitle({ index }: { index: number }) {
  // Types are inferred — no explicit generics needed
  const title = useAtomicProp({
    reducer: 'todos',
    property: `items.${index}.title`,
  });
  return <span>{title}</span>;
}

Example

example

const title = useAtomicProp<'todos', AppState, 'todos', 'items.0.title'>(
  { reducer: 'todos', property: 'items.0.title' }
);

Example

example

const len = useAtomicProp(
  { reducer: 'todos', property: 'items' },
  items => items.length
);

Example

example

const titles = useAtomicProp(
  { reducer: 'todos', property: 'items.**' },
  state => state.items.map(x => x.title),
  shallowEqual
);

Overload 5

signature

useAtomicProp<R, S, T>(spec, map, isEqual?): T

Fine-grained **single-path** selector for a reducer's state. Re-renders only when the specified reducer.property (dotted path) actually changes. For most applications, prefer using the typed version from createHooks which infers all type parameters automatically. **Supports** - Exact root prop: { reducer: "todo", property: "data" } - Exact deep path: { reducer: "todo", property: "data.123.title" } - Wildcards (pattern): { reducer: "todo", property: "data.*" } or "data.**" **Overloads** - Exact path (no *): returns the precise PathValue when map is omitted - Exact path + map: returns T from map(value) - Glob path (with */**): requires map and returns T from map(state)

Type parameters

Name	Type	Description
`R`	`extends string`
`S`	`extends Record<R, any>`
`T`	`—`

Parameters

spec — object with:

Name	Type	Description
`property`	`string`
`reducer`	`R`

Name	Type	Description
`map`	`(value: any) => T`

Name	Type	Description
`isEqual`?	`(a: T, b: T) => boolean`

Returns

T

Example

example

const { useAtomicProp } = createHooks(AppStoreContext);

function TodoTitle({ index }: { index: number }) {
  // Types are inferred — no explicit generics needed
  const title = useAtomicProp({
    reducer: 'todos',
    property: `items.${index}.title`,
  });
  return <span>{title}</span>;
}

Example

example

const title = useAtomicProp<'todos', AppState, 'todos', 'items.0.title'>(
  { reducer: 'todos', property: 'items.0.title' }
);

Example

example

const len = useAtomicProp(
  { reducer: 'todos', property: 'items' },
  items => items.length
);

Example

example

const titles = useAtomicProp(
  { reducer: 'todos', property: 'items.**' },
  state => state.items.map(x => x.title),
  shallowEqual
);