useEvent
functionsignature
useEvent<EM, C, T>(channel, type, handler, phase, options?): voidSubscribe 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: NotifiedPhase) => 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'). |
options, object with:
| Name | Type | Description |
|---|---|---|
duringReplay? | boolean | Also run this handler while devtools is replaying, which it does not by default. |
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');