Skip to main content

on

Registers a handler that runs after the store's default handler for a given action. Use it to react to confirmed state changes - logging, syncing to a backend, or updating derived UI.

Usage​

on(
  action: keyof StoreActions,
  handler: (data: StoreActions[typeof action]) => void | boolean | Promise<boolean>,
  config?: { tag?: string | number | symbol }
): void;
  • action - the action name to listen for (e.g. "update-card", "move-card")
  • handler - callback that receives the action payload after the store has processed it
  • config.tag - optional identifier for later removal with detach(tag)

Example​

api.on("update-card", ({ id, card }) => {
	console.log(`Card ${id} updated`, card);
});
// Tag a handler for later removal
api.on(
	"move-card",
	({ id, column }) => {
		saveToBackend(id, column);
	},
	{ tag: "sync" }
);

// Remove it later
api.detach("sync");
  • intercept - pre-handler that can cancel actions before they reach the store
  • detach - remove a handler by tag
  • exec - dispatch an action through the event bus