@strategies/react-events

Motivation

mobx and other state management solutions allow state changes to be observed really effectively so that components can respond reactively. However some reactions need to happen in response to events rather than a state change.

For example a user clicking a button to zoom in to a map. Nothing about the state has changed, and external components don't know enough about the intended action to modify the state at the top level, so the component needs to receive an instruction to respond to.

One way of solving this in react is to pass a ref to the object (such as the Map instance) up the component hierarchy so that a method can be called in response to a user interaction. However passing refs up is more cumbersome than passing an object down as a prop - or accessing that object (such as a store) via context or imports.

This solution uses an object that implements a typed EventEmitter and then listens to that object on a react component using useEventSubscription

mobx

This event emitter and useEventSubscription pattern works well with mobx stores and can be implemented on a mobx store.

creating an event emitter with typed events

using a type automatically generates the accepted "keys" that can be used as strings.

type MapStoreEvents = {
    zoomIn: number,
    zoomOut: number,
    zoomToSelected: void
}

export class MapStore extends EventEmitter<MapStoreEvents> {
    zoomToSelected() {
        this.emit("zoomToSelected")
    }
    zoomIn() {
        this.emit("zoomIn", 5)
    }
    zoomOut() {
        this.emit("zoomOut", 5)
    }
}

useEventSubscription hook for EventEmitter

whenever the event emitter calls emit with a specific key, the function passed to the useEventSubscription is executed.

useEventSubscription(myEmitter, "zoomToSelected", () => {
   mapRef.zoomToSelected('Zoomed');
});