# Routedux — Routes the Redux Way

 Routux routes URLs to Redux actions and vice versa. 
 
 Your application doesn't need to know it lives in a browser, but your users want pretty urls and deep links.

 
 ## Wait, why would you want to do that?  Aren't URLs pretty essential for web applications?
 

 React Router is the currently-accepted way to do routing in React applications.  We found some issues with that, and 
 we basically agree with Formidable Labs that [React Router is the wrong way to route in Redux apps.](http://formidable.com/blog/2016/07/11/let-the-url-do-the-talking-part-1-the-pain-of-react-router-in-redux/)
 
 However, we don't think their solution ([redux-little-router](https://github.com/FormidableLabs/redux-little-router)) 
 goes far enough, as it still embeds the idea of routes throughout your React component structure.

 We think a cleaner separation would be to think of UI state as another part of the state tree, along with the data model.

 This allows your application to determine how to display itself without reference to being on the world-wide web.

 It also means that you can express all UI transitions as actions instead of URL changes, making your application portable
 to non-web environments without requiring some other routing technology.  

 If you'd like to make it a mobile app, just remove the routes, and as long as you're not relying on links and urls, everything
 works just as before.

 As an added (and we think absolutely essential) benefit, your entire application becomes easier to test, as rendering
 is a pure function of Redux state, and model logic is entirely encapsulated in Redux outside of the app.

 
 ## Routing in 25 lines
 
 ```javascript

 import installBrowserRouter from 'routedux';

 import {createStore, compose, applyMiddleware} from 'redux';
 
 const LOAD_USER = 'LOAD_USER';
 
 function currentUserId() {
   return 42;
 };
 
 function reduce(state = initialState(), action) {
   ...
 }
 
 const routesConfig = [
   ['/user/:id', LOAD_USER, {}],
   ['/user/me', LOAD_USER, {id: currentUserId()}],
   ['/article/:slug', 'LOAD_ARTICLE', {}],
   ['/', 'LOAD_ARTICLE', {slug: "home-content"}]
 ];
 
 const {enhancer, middleware} = installBrowserRouter(routesConfig);
 
 const store = createStore(reduce, compose(
   enhance,
   applyMiddleware(middleware)
 ));
 
 ```
 
 Any time a handled action fires the url in the address bar will change, and if the url in the address bar changes
 the corresponding action will fire (unless the action was initiated by a url change).
 
 
 ## Route precedence examples (how we resolve seeming ambiguity)
 

 Route precedence is a function of the type of matching done in each segment and the order in which the wildcard segments
 match.  Exact matches are always preferred to wildcards moving from left to right.  
 
 ```javascript
 
     const routesInOrderOfPrecedence = [
       
       ['/user/me/update', '/user/me'], // both perfectly specific - will match above any wildcard route
       '/user/me/:view',
       '/user/:id/update', // less specific because 'me' is exact match, while :id is a wildcard
       '/user/:id/:view'
     ];
 
 ```
 

 ## Usage with fragment
 

 ```javascript
 
 const state = {
   menu: ...
 }
 
 const view = (
   <PageFrame>
       <Fragment state={state} filterOn="menu">
         <Menu />
       </Fragment>
   </PageFrame>
 )
 
 // If menu is truthy, this renders as:
 
 (
   <PageFrame>
     <Menu />
   </PageFrame>
 )
 
 // If menu is falsy, this renders as:
 (
   <PageFrame>
   </PageFrame>
 )
 
 ///////
 
 const state = {
   menu: {
     prop: true
   }
 }
 
 // If property is missing in path, it's falsy.
 
 const view = (
   <PageFrame>
       <Fragment state={state} filterOn="menu.missingProp.something">
         <Menu />
       </Fragment>
   </PageFrame>
 )
 
 // Renders as: 
 (
   <PageFrame>
   </PageFrame>
 )
 
 ```