A state-based router
You can now see how the routing between all the WorkflowStep instances is achieved purely via a state-based approach. All of the navigation logic lies inside the MobX store, which in this case is CheckoutWorkflow. By connecting the observables (tracker.page, currentStep, and step) via a set of reactions, we have created side effects that update the browser history as well as create instances of WorkflowStep, which are used by the TemplateStepComponent.
Because we are sharing the browser history (via HistoryTracker) between react-router-dom and MobX, we can keep the observables in sync with the URL changes.
This state-based approach to routing helps in keeping a crisp mental model of the workflow. All of the logic of ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access