Routing
Routing
In this example, a set of tabs are rendered to the screen, with the currently active tab stored in React state.
Aperture
Two sources are observed in this example:
- The
setActiveTabcallback function. - The
window.popstateevent.
In addition, a single event is fired when the
aperture initiates, which sets the initial state to initialProps.activeTab.All three are simply mapped to objects with the desired structure, and merged into a single stream.
Handler
If the effect's type is
NAVIGATION, the handler calculates the new browser url, and pushes it to window.history.If the effect's type is
STATE, it calls setActiveTab with the new state.Result
The end result is a set of tabs whose state is pushed to the browser url as a side-effect.
Last modified 2yr ago