MobX React Router Utils

Routing utils to use with RouterStore (from mobx-react-router) on your MobX stores.

Install it

yarn add mobx-react-router-utils

Use it

1import { computedRouteParam, setRoutingStore } from 'mobx-react-router-utils'
2
3// Set the reference to your routing store before any usage
4// You ony need to this once in your application 
5setRoutingStore(routingStore)
6
7const routes = {
8  search: '/search',
9  citySearch: '/cities/:city'
10}
11
12class DemoSearchStore {
13    city = computedRouteParam('city', {
14      patterns: [routes.citySearch],
15    })
16    
17    // this one will come from the query string
18    checkIn = computedRouteParam('checkIn', {
19      // Define the route patterns for which this one is valid
20      patterns: [routes.search, routes.citySearch],
21      
22      // Set a parsing fn to transform from string
23      parse: _parseDate,
24      
25      // Set a formatting fn to transform into string
26      format: _formatDate, 
27
28      // It'll return the default value in case it's 
29      // not present on the route or with an empty value
30      defaultValue: 'temecula'
31    })
32    
33    checkOut = computedRouteParam('checkOut', {
34      patterns: [routes.search, routes.citySearch],
35      parse: _parseDate,
36      format: _formatDate,
37    })
38    
39    setCity = (city: Maybe<string>) => {
40      // For updating the current route, push() and replace() methods are available:
41      // - push: will add the new url to the browsing history
42      // - replace: will replace the current url on the browsing history
43      this.city.push(city, {
44        // enforce a route pattern if needed, otherwise, it will use the 
45        // current location (if matches the config) or first pattern available
46        pattern: !city && routes.search,
47        
48        // cleanup all other params (default: false)
49        cleanParams: true,  
50              
51        // OR cleanup only selected params
52        cleanParams: [   
53          this.checkIn, 
54          this.checkOut
55        ]
56      })
57    }
58    
59    setPeriod = (checkIn: Maybe<Date>, checkOut: Maybe<Date>) => {
60      this.checkIn.push(checkIn)
61      this.checkOut.replace(checkOut)
62    }
63
64    // ...
65}