Interface: ReactAsyncQueuer\#

Defined in: react-pacer/src/async-queuer/useAsyncQueuer.ts:23

Extends#

• Omit\<`AsyncQueuer`\<`TValue`\>, "store">

Type Parameters#

TValue#

TValue

TSelected#

TSelected = { }

Properties#

state#

readonly state: Readonly<TSelected>;

Defined in: react-pacer/src/async-queuer/useAsyncQueuer.ts:49

Reactive state that will be updated and re-rendered when the queuer state changes

Use this instead of queuer.store.state

store#

readonly store: Store<Readonly<AsyncQueuerState<TValue>>>;

Defined in: react-pacer/src/async-queuer/useAsyncQueuer.ts:55

Deprecated#

Use queuer.state instead of queuer.store.state if you want to read reactive state. The state on the store object is not reactive, as it has not been wrapped in a useSelector hook internally. Although, you can make the state reactive by using the useSelector in your own usage.

Subscribe()#

Subscribe: <TSelected>(props) => ReactNode | Promise<ReactNode>;

Defined in: react-pacer/src/async-queuer/useAsyncQueuer.ts:40

A React HOC (Higher Order Component) that allows you to subscribe to the queuer state.

This is useful for opting into state re-renders for specific parts of the queuer state deep in your component tree without needing to pass a selector to the hook.

Type Parameters#

TSelected#

TSelected

Parameters#

props#

children#

ReactNode | (state) => ReactNode

selector#

(state) => TSelected

Returns#

ReactNode | Promise\<`ReactNode`\>

Example#

<queuer.Subscribe selector={(state) => ({ size: state.size, isRunning: state.isRunning })}>
  {({ size, isRunning }) => (
    <div>Queue: {size} items, {isRunning ? 'Processing' : 'Idle'}</div>
  )}
</queuer.Subscribe>