MobX Quick Start Guide

Modeling the observable state

The essence of this SPA is the checkout workflow that takes you step by step, where each step is a route. Since a route is driven by a URL, we need a way to monitor the URL and also have the ability to change it as we move between steps. The navigation between steps is a side effect of some change in the observable state. We will model this workflow with a CheckoutWorkflow class that contains the core observable state:

const routes = {    shopping: '/',    cart: '/cart',    payment: '/payment',    confirm: '/confirm',    track: '/track',};export class CheckoutWorkflow {    static steps = [        { name: 'shopping', stepClass: ShoppingStep },        { name: 'cart', stepClass: ShowCartStep },        { name: 'payment', stepClass: PaymentStep },        {