Observable-based routing

MobX Recipes

Search…

MobX Recipes

Introduction

Observable vs @observable

Auto-save

Use extendObservable sparingly

Use observables instead of state in React components

Computed properties without @computed

Use computed.struct for computed objects

Observable-based routing

Be aware of short-circuited code in reactions

Observable-based routing

Imagine your app has a multi-step wizard such as a shopping cart checkout with a variety of error and special case screens. It is very convenient to have your observable store's business logic decide what state it should be in and to have the UI render the appropriate screen.
At the same time, you still need to allow the user to navigate back or between screens manually, so the observable state must not force a particular screen to be displayed.
To accomplish this with mobx and react-router 3.x you can use an autorun reaction in a parent component that forces a re-route only when the observable changes but not when the user navigates between child components.
In MobX 3.x/Mobx-React 4.x, there is a bit of a trick to doing this correctly, so below is an example that re-routes based on the value of some store.stage observable.
WizardRouter.jsx:
1
import React from 'react';
2
import { Router, Route, hashHistory} from 'react-router';
3
import store from './store';
4
import Wizard from './Wizard';
5
// some screens:
6
import Start from './Start';
7
import Error from './Error';
8
import Select from './Select';
9
​
10
class WizardRouter extends React.Component {
11
​
12
  // Determines which screen to show on initial load
13
  redirectToDefault = (nextState, replace) => {
14
    if (nextState.location.pathname === '/wizard') {
15
      replace(this.selectRoute() || '/wizard/start');
16
    }
17
  };
18
​
19
  // This method is also provided as selectRoute handler to autorun in Wizard.jsx
20
  selectRoute = () => {
21
    switch (store.stage) {
22
      case store.STAGES.error:
23
        return '/wizard/error';
24
      case store.STAGES.select:
25
        return '/wizard/select';
26
    }
27
    return null;
28
  };
29
​
30
  render() {
31
    return (
32
      <Router history={hashHistory}>
33
        <Route path="/wizard"
34
          component={Wizard}
35
          onEnter={this.redirectToDefault}
36
          selectRoute={this.selectRoute}
37
        >
38
          <Route path="start" component={Start} />
39
          <Route path="error" component={Error} />
40
          <Route path="select" component={Select} />
41
        </Route>
42
     </Router>
43
    );
44
  }
45
}
46
​
47
export default WizardRouter;
Copied!
Wizard.jsx:
1
import React from 'react';
2
import { routerShape } from 'react-router/lib/PropTypes';
3
import { autorun, action } from 'mobx';
4
import { observer } from 'mobx-react';
5
import store from './store';
6
​
7
let autorunDisposer;
8
​
9
@observer class Wizard extends React.Component {
10
  componentWillMount() {
11
    /*
12
     In MobX 3.x/Mobx-React 4.x, @observer components' props are made
13
     observable, so referencing this.props.route.selectRoute inside the
14
     autorun would cause it to fire not only when store.stage changes but when
15
     location changes, thus making user navigation between screens impossible.
16
     So, dereference early to make it NOT observable.
17
     */
18
    const selectRoute = this.props.route.selectRoute;
19
​
20
    autorunDisposer = autorun(() => {
21
      const path = selectRoute();
22
​
23
      // any observable accessed inside the action will
24
      // not cause this autorun to re-run if it changes
25
      action(() => {
26
        if (path && !this.props.router.isActive(path)) {
27
          this.props.router.push(path);
28
        }
29
      })();
30
    });
31
  }
32
​
33
  componentWillUnmount() {
34
    autorunDisposer && autorunDisposer();
35
  }
36
​
37
  render() {
38
    return (
39
      <div>
40
        {this.props.children}
41
      </div>
42
    );
43
  }
44
}
45
​
46
Wizard.propTypes = {
47
  children: React.PropTypes.element,
48
  router: routerShape, // React-Router provides this automatically
49
  // props provided to Route component are available here:
50
  route: React.PropTypes.shape({
51
    selectRoute: React.PropTypes.func,
52
  }),
53
};
54
​
55
export default Wizard;
Copied!

Use computed.struct for computed objects

Be aware of short-circuited code in reactions

Last modified 1yr ago

Copy link