useEvent · @yoltra/react

signature

useEvent<EM, C, T>(channel, type, handler, phase): void

Subscribe to store events from a React component. This hook enables reactive UI patterns by allowing components to respond to specific events without selecting state. Useful for: - Showing notifications on certain events - Triggering animations - Logging/analytics - Responding to rejected (uncommitted) events **Phases:** - 'committed' (default): Events that passed middleware and reached reducers - 'uncommitted': Events rejected by middleware - 'all': Both committed and uncommitted events (handler receives phase parameter)

Type parameters

Name	Type	Description
`EM`	`extends EventMapBase`	Event map type.
`C`	`extends string`	Channel key within `EM`.
`T`	`extends string`	Event type key within channel `C`.

Parameters

Name	Type	Description
`channel`	`C`	Event channel to subscribe to.

Name	Type	Description
`type`	`T`	Event type to subscribe to.

Name	Type	Description
`handler`	`(event: Event<EM, C, T>, getState: () => any, emit: Emit<EM>, phase: "committed" \| "uncommitted") => void \| Promise<void>`	Handler called when the event fires. Receives `(event, getState, emit, phase)`.

Name	Type	Description
`phase`	`EventPhase`	Event phase to subscribe to (default: `'committed'`).

Returns

void

Example

example

useEvent('ui', 'save', (event, getState, emit, phase) => {
  showToast('Saved successfully!');
});

Example

example

useEvent('ui', 'delete', (event, getState, emit, phase) => {
  showToast('Delete was blocked by middleware');
}, 'uncommitted');

Example

example

useEvent('ui', 'action', (event, getState, emit, phase) => {
  console.log('Action:', phase); // 'committed' or 'uncommitted'
}, 'all');