git.fiddlerwoaroof.com
Browse code

second try

Ed Langley authored on 18/06/2017 04:29:27
Showing 1 changed files
docs/index.html
History View file @ 67b69d9
... ... 
@@ -1,152 +1,168 @@
1 1 
 <!DOCTYPE html>
2 2 
 <html>
3 
-<head>
4 
-  <meta charset="utf-8">
5 
-  <meta name="generator" content="pandoc">
6 
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
7 
-  <title></title>
8 
-  <style type="text/css">code{white-space: pre;}</style>
9 
-  <style type="text/css">
10 
-div.sourceCode { overflow-x: auto; }
11 
-table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
12 
-  margin: 0; padding: 0; vertical-align: baseline; border: none; }
13 
-table.sourceCode { width: 100%; line-height: 100%; }
14 
-td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; }
15 
-td.sourceCode { padding-left: 5px; }
16 
-code > span.kw { color: #007020; font-weight: bold; } /* Keyword */
17 
-code > span.dt { color: #902000; } /* DataType */
18 
-code > span.dv { color: #40a070; } /* DecVal */
19 
-code > span.bn { color: #40a070; } /* BaseN */
20 
-code > span.fl { color: #40a070; } /* Float */
21 
-code > span.ch { color: #4070a0; } /* Char */
22 
-code > span.st { color: #4070a0; } /* String */
23 
-code > span.co { color: #60a0b0; font-style: italic; } /* Comment */
24 
-code > span.ot { color: #007020; } /* Other */
25 
-code > span.al { color: #ff0000; font-weight: bold; } /* Alert */
26 
-code > span.fu { color: #06287e; } /* Function */
27 
-code > span.er { color: #ff0000; font-weight: bold; } /* Error */
28 
-code > span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
29 
-code > span.cn { color: #880000; } /* Constant */
30 
-code > span.sc { color: #4070a0; } /* SpecialChar */
31 
-code > span.vs { color: #4070a0; } /* VerbatimString */
32 
-code > span.ss { color: #bb6688; } /* SpecialString */
33 
-code > span.im { } /* Import */
34 
-code > span.va { color: #19177c; } /* Variable */
35 
-code > span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
36 
-code > span.op { color: #666666; } /* Operator */
37 
-code > span.bu { } /* BuiltIn */
38 
-code > span.ex { } /* Extension */
39 
-code > span.pp { color: #bc7a00; } /* Preprocessor */
40 
-code > span.at { color: #7d9029; } /* Attribute */
41 
-code > span.do { color: #ba2121; font-style: italic; } /* Documentation */
42 
-code > span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
43 
-code > span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
44 
-code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
45 
-  </style>
46 
-  <!--[if lt IE 9]>
47 
-    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
48 
-  <![endif]-->
49 
-</head>
50 
-<body>
51 
-<h1 id="routedux-routes-the-redux-way-npm-version-build-status">Routedux — Routes the Redux Way <a href="https://badge.fury.io/js/routedux"><img src="https://badge.fury.io/js/routedux.svg" alt="npm version" /></a> <a href="https://travis-ci.org/cjdev/routedux"><img src="https://travis-ci.org/cjdev/routedux.svg?branch=master" alt="Build Status" /></a></h1>
52 
-<p><img alt="Route Dux" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Ducks_crossing_the_road_sign.png/92px-Ducks_crossing_the_road_sign.png" align="right" /></p>
53 
-<p>Routedux (:duck: :duck: :duck:) routes URLs to Redux actions and vice versa.</p>
54 
-<p>Your application doesn't need to know it lives in a browser, but your users want pretty urls and deep links.</p>
55 
-<h2 id="wait-my-application-doesnt-need-to-know-it-lives-in-a-browser">Wait, my application doesn't need to know it lives in a browser?</h2>
56 
-<p>URLs are great for finding things on the internet. But a single page application is not the same as a collection of resources that lives on a remote server.</p>
57 
-<p>A single page application is a web application only in the sense that it lives on the web. URLs are are not essential to it working well.</p>
58 
-<p>URLs give users accessing your application in a browser the ability to bookmark a particular view in your application so that their expectation of browser-based applications will continue to work.</p>
59 
-<p>We think that's a good thing, but we also don't think the idea of url paths should be littered through your application.</p>
60 
-<p>When you are developing a redux application, you want your UI to be a pure function of the current state tree.</p>
61 
-<p>By adding routes to that, it makes it harder to test. And this difficulty can be compounded by other decisions about how to add routes to your application.</p>
62 
-<h2 id="an-alternative-approach">An alternative approach</h2>
63 
-<p>React Router is the currently-accepted way to do URL routing in React applications. For a standard React application without Redux, this solution isn't too bad. But once you add Redux, things get difficult.</p>
64 
-<p>We basically discovered the same lessons as Formidable Labs: <a href="http://formidable.com/blog/2016/07/11/let-the-url-do-the-talking-part-1-the-pain-of-react-router-in-redux/">React Router is the wrong way to route in Redux apps.</a></p>
65 
-<p>However, we don't think their solution (<a href="https://github.com/FormidableLabs/redux-little-router">redux-little-router</a>) goes far enough, as it still embeds the idea of routes throughout your user interface.</p>
66 
-<p>Once you separate URLs from your application state, you can easily port it to other environments that don't know what URLs are, and by simply removing the routing declaration, things will work as before.</p>
67 
-<p>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 and route actions are entirely encapsulated in Redux outside of the app.</p>
68 
-<h2 id="simple-routing-in-25-lines">Simple Routing in 25 lines</h2>
69 
-<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="im">import</span> installBrowserRouter <span class="im">from</span> <span class="st">&#39;routedux&#39;</span><span class="op">;</span>
70 
-<span class="im">import</span> <span class="op">{</span>createStore<span class="op">,</span> compose<span class="op">,</span> applyMiddleware<span class="op">}</span> <span class="im">from</span> <span class="st">&#39;redux&#39;</span><span class="op">;</span>
3 
+  <head>
4 
+    <meta charset="utf-8">
5 
+    <meta name="generator" content="pandoc">
6 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
7 
+    <title></title>
8 
+    <style type="text/css">
9 
+      div.sourceCode { overflow-x: auto; }
10 
+      table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
11 
+      margin: 0; padding: 0; vertical-align: baseline; border: none; }
12 
+      table.sourceCode { width: 100%; line-height: 100%; }
13 
+      td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; }
14 
+      td.sourceCode { padding-left: 5px; }
15 
+      code > span.kw { color: #007020; font-weight: bold; } /* Keyword */
16 
+      code > span.dt { color: #902000; } /* DataType */
17 
+      code > span.dv { color: #40a070; } /* DecVal */
18 
+      code > span.bn { color: #40a070; } /* BaseN */
19 
+      code > span.fl { color: #40a070; } /* Float */
20 
+      code > span.ch { color: #4070a0; } /* Char */
21 
+      code > span.st { color: #4070a0; } /* String */
22 
+      code > span.co { color: #60a0b0; font-style: italic; } /* Comment */
23 
+      code > span.ot { color: #007020; } /* Other */
24 
+      code > span.al { color: #ff0000; font-weight: bold; } /* Alert */
25 
+      code > span.fu { color: #06287e; } /* Function */
26 
+      code > span.er { color: #ff0000; font-weight: bold; } /* Error */
27 
+      code > span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
28 
+      code > span.cn { color: #880000; } /* Constant */
29 
+      code > span.sc { color: #4070a0; } /* SpecialChar */
30 
+      code > span.vs { color: #4070a0; } /* VerbatimString */
31 
+      code > span.ss { color: #bb6688; } /* SpecialString */
32 
+      code > span.im { } /* Import */
33 
+      code > span.va { color: #19177c; } /* Variable */
34 
+      code > span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
35 
+      code > span.op { color: #666666; } /* Operator */
36 
+      code > span.bu { } /* BuiltIn */
37 
+      code > span.ex { } /* Extension */
38 
+      code > span.pp { color: #bc7a00; } /* Preprocessor */
39 
+      code > span.at { color: #7d9029; } /* Attribute */
40 
+      code > span.do { color: #ba2121; font-style: italic; } /* Documentation */
41 
+      code > span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
42 
+      code > span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
43 
+      code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
44 
+      body { width:
45 
+    </style>
46 
+    <style type="text/css">code{white-space: pre;}</style>
47 
+    <link rel="stylesheet" href="tufte.css" />
48 
+    <!--[if lt IE 9]>
49 
+      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
50 
+    <![endif]-->
51 
+  </head>
52 
+  <body>
53 
+    <article>
54 
+      <h1 id="routedux-routes-the-redux-way-npm-version-build-status">Routedux — Routes the Redux Way <a href="https://badge.fury.io/js/routedux"><img src="https://badge.fury.io/js/routedux.svg" alt="npm version" /></a> <a href="https://travis-ci.org/cjdev/routedux"><img src="https://travis-ci.org/cjdev/routedux.svg?branch=master" alt="Build Status" /></a></h1>
55 
+      <p><img alt="Route Dux" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Ducks_crossing_the_road_sign.png/92px-Ducks_crossing_the_road_sign.png" align="right" /></p>
56 
+      <p>Routedux routes URLs to Redux actions and vice versa.</p>
57 
+      <p>Your application doesn't need to know it lives in a browser, but your users want pretty urls and deep links.</p>
58 
+      <section>
59 
+        <h2 id="wait-my-application-doesnt-need-to-know-it-lives-in-a-browser">Wait, my application doesn't need to know it lives in a browser?</h2>
60 
+        <p>URLs are great for finding things on the internet. But a single page application is not the same as a collection of resources that lives on a remote server.</p>
61 
+        <p>A single page application is a web application only in the sense that it lives on the web. URLs are are not essential to it working well.</p>
62 
+        <p>URLs give users accessing your application in a browser the ability to bookmark a particular view in your application so that their expectation of browser-based applications will continue to work.</p>
63 
+        <p>We think that's a good thing, but we also don't think the idea of url paths should be littered through your application.</p>
64 
+        <p>When you are developing a redux application, you want your UI to be a pure function of the current state tree.</p>
65 
+        <p>By adding routes to that, it makes it harder to test. And this difficulty can be compounded by other decisions about how to add routes to your application.</p>
66 
+      </section>
67 
+      <section>
68 
+        <h2 id="an-alternative-approach">An alternative approach</h2>
69 
+        <p>React Router is the currently-accepted way to do URL routing in React applications. For a standard React application without Redux, this solution isn't too bad. But once you add Redux, things get difficult.</p>
70 
+        <p>We basically discovered the same lessons as Formidable Labs: <a href="http://formidable.com/blog/2016/07/11/let-the-url-do-the-talking-part-1-the-pain-of-react-router-in-redux/">React Router is the wrong way to route in Redux apps.</a></p>
71 
+        <p>However, we don't think their solution (<a href="https://github.com/FormidableLabs/redux-little-router">redux-little-router</a>) goes far enough, as it still embeds the idea of routes throughout your user interface.</p>
72 
+        <p>Once you separate URLs from your application state, you can easily port it to other environments that don't know what URLs are, and by simply removing the routing declaration, things will work as before.</p>
73 
+        <p>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 and route actions are entirely encapsulated in Redux outside of the app.</p>
74 
+      </section>
75 
+      <section>
76 
+        <h2 id="simple-routing-in-25-lines">Simple Routing in 25 lines</h2>
77 
+        <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="im">import</span> installBrowserRouter <span class="im">from</span> <span class="st">&#39;routedux&#39;</span><span class="op">;</span>
78 
+          <span class="im">import</span> <span class="op">{</span>createStore<span class="op">,</span> compose<span class="op">,</span> applyMiddleware<span class="op">}</span> <span class="im">from</span> <span class="st">&#39;redux&#39;</span><span class="op">;</span>
71 79
72 
-<span class="kw">const</span> LOAD_USER <span class="op">=</span> <span class="st">&#39;LOAD_USER&#39;</span><span class="op">;</span>
80 
+          <span class="kw">const</span> LOAD_USER <span class="op">=</span> <span class="st">&#39;LOAD_USER&#39;</span><span class="op">;</span>
73 81
74 
-<span class="kw">function</span> <span class="at">currentUserId</span>() <span class="op">{</span>
75 
-  <span class="cf">return</span> <span class="dv">42</span><span class="op">;</span>
76 
-<span class="op">};</span>
82 
+          <span class="kw">function</span> <span class="at">currentUserId</span>() <span class="op">{</span>
83 
+          <span class="cf">return</span> <span class="dv">42</span><span class="op">;</span>
84 
+          <span class="op">};</span>
77 85
78 
-<span class="kw">function</span> <span class="at">reduce</span>(state <span class="op">=</span> <span class="at">initialState</span>()<span class="op">,</span> action) <span class="op">{</span>
79 
-  ...
80 
-<span class="op">}</span>
86 
+          <span class="kw">function</span> <span class="at">reduce</span>(state <span class="op">=</span> <span class="at">initialState</span>()<span class="op">,</span> action) <span class="op">{</span>
87 
+            ...
88 
+          <span class="op">}</span>
81 89
82 
-<span class="kw">const</span> routesConfig <span class="op">=</span> [
83 
-  [<span class="st">&#39;/user/:id&#39;</span><span class="op">,</span> LOAD_USER<span class="op">,</span> <span class="op">{}</span>]<span class="op">,</span>
84 
-  [<span class="st">&#39;/user/me&#39;</span><span class="op">,</span> LOAD_USER<span class="op">,</span> <span class="op">{</span><span class="dt">id</span><span class="op">:</span> <span class="at">currentUserId</span>()<span class="op">}</span>]<span class="op">,</span>
85 
-  [<span class="st">&#39;/article/:slug&#39;</span><span class="op">,</span> <span class="st">&#39;LOAD_ARTICLE&#39;</span><span class="op">,</span> <span class="op">{}</span>]<span class="op">,</span>
86 
-  [<span class="st">&#39;/&#39;</span><span class="op">,</span> <span class="st">&#39;LOAD_ARTICLE&#39;</span><span class="op">,</span> <span class="op">{</span><span class="dt">slug</span><span class="op">:</span> <span class="st">&quot;home-content&quot;</span><span class="op">}</span>]
87 
-]<span class="op">;</span>
90 
+          <span class="kw">const</span> routesConfig <span class="op">=</span> [
91 
+            [<span class="st">&#39;/user/:id&#39;</span><span class="op">,</span> LOAD_USER<span class="op">,</span> <span class="op">{}</span>]<span class="op">,</span>
92 
+            [<span class="st">&#39;/user/me&#39;</span><span class="op">,</span> LOAD_USER<span class="op">,</span> <span class="op">{</span><span class="dt">id</span><span class="op">:</span> <span class="at">currentUserId</span>()<span class="op">}</span>]<span class="op">,</span>
93 
+            [<span class="st">&#39;/article/:slug&#39;</span><span class="op">,</span> <span class="st">&#39;LOAD_ARTICLE&#39;</span><span class="op">,</span> <span class="op">{}</span>]<span class="op">,</span>
94 
+            [<span class="st">&#39;/&#39;</span><span class="op">,</span> <span class="st">&#39;LOAD_ARTICLE&#39;</span><span class="op">,</span> <span class="op">{</span><span class="dt">slug</span><span class="op">:</span> <span class="st">&quot;home-content&quot;</span><span class="op">}</span>]
95 
+            ]<span class="op">;</span>
88 96
89 
-<span class="kw">const</span> <span class="op">{</span>enhancer<span class="op">,</span> middleware<span class="op">}</span> <span class="op">=</span> <span class="at">installBrowserRouter</span>(routesConfig)<span class="op">;</span>
97 
+          <span class="kw">const</span> <span class="op">{</span>enhancer<span class="op">,</span> middleware<span class="op">}</span> <span class="op">=</span> <span class="at">installBrowserRouter</span>(routesConfig)<span class="op">;</span>
90 98
91 
-<span class="kw">const</span> store <span class="op">=</span> <span class="at">createStore</span>(reduce<span class="op">,</span> <span class="at">compose</span>(
92 
-  enhance<span class="op">,</span>
93 
-  <span class="at">applyMiddleware</span>(middleware)
94 
-))<span class="op">;</span></code></pre></div>
95 
-<p>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).</p>
96 
-<h2 id="route-matching-precedence---which-route-matches-best">Route matching precedence - which route matches best?</h2>
97 
-<p>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.</p>
98 
-<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript">
99 
-    <span class="kw">const</span> routesInOrderOfPrecedence <span class="op">=</span> [
100 
-
101 
-      [<span class="st">&#39;/user/me/update&#39;</span><span class="op">,</span> <span class="st">&#39;/user/me&#39;</span>]<span class="op">,</span> <span class="co">// both perfectly specific - will match above any wildcard route</span>
102 
-      <span class="st">&#39;/user/me/:view&#39;</span><span class="op">,</span>
103 
-      <span class="st">&#39;/user/:id/update&#39;</span><span class="op">,</span> <span class="co">// less specific because &#39;me&#39; is exact match, while :id is a wildcard</span>
104 
-      <span class="st">&#39;/user/:id/:view&#39;</span>
105 
-    ]<span class="op">;</span></code></pre></div>
106 
-<h2 id="fragment-component">Fragment component</h2>
107 
-<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript">
108 
-<span class="kw">const</span> state <span class="op">=</span> <span class="op">{</span>
109 
-  <span class="dt">menu</span><span class="op">:</span> ...
110 
-<span class="op">}</span>
99 
+          <span class="kw">const</span> store <span class="op">=</span> <span class="at">createStore</span>(reduce<span class="op">,</span> <span class="at">compose</span>(
100 
+            enhance<span class="op">,</span>
101 
+          <span class="at">applyMiddleware</span>(middleware)
102 
+            ))<span class="op">;</span></code></pre></div>
103 
+        <p>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).</p>
104 
+      </section>
105 
+      <section>
106 
+        <h2 id="route-matching-precedence---which-route-matches-best">Route matching precedence - which route matches best?</h2>
107 
+        <p>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.</p>
108 
+        <pre class="code sourceCode javascript"><code class="sourceCode javascript">
109 
+          <span class="kw">const</span> routesInOrderOfPrecedence <span class="op">=</span> [
110 
+            [<span class="st">&#39;/user/me/update&#39;</span><span class="op">,</span> <span class="st">&#39;/user/me&#39;</span>]<span class="op">,</span> <span class="co">// both perfectly specific - will match above any wildcard route</span>
111 
+          <span class="st">  &#39;/user/me/:view&#39;</span><span class="op">,</span>
112 
+          <span class="st">  &#39;/user/:id/update&#39;</span><span class="op">,</span> <span class="co">// less specific because &#39;me&#39; is exact match, while :id is a wildcard</span>
113 
+          <span class="st">  &#39;/user/:id/:view&#39;</span>
114 
+          ]<span class="op">;</span></code></pre>
115 
+      </section>
116 
+      <section>
117 
+        <h2 id="fragment-component">Fragment component</h2>
118 
+        <pre class="code sourceCode javascript"><code class="sourceCode javascript">
119 
+          <span class="kw">const</span> state <span class="op">=</span> <span class="op">{</span>
120 
+          <span class="dt">  menu</span><span class="op">:</span> ...
121 
+          <span class="op">}</span>
111 122
112 
-<span class="kw">const</span> view <span class="op">=</span> (
113 
-  <span class="op">&lt;</span>PageFrame<span class="op">&gt;</span>
114 
-      <span class="op">&lt;</span>Fragment state<span class="op">={</span>state<span class="op">}</span> filterOn<span class="op">=</span><span class="st">&quot;menu&quot;</span><span class="op">&gt;</span>
115 
-        <span class="op">&lt;</span>Menu /<span class="op">&gt;</span>
116 
-      <span class="op">&lt;</span><span class="ss">/Fragment&gt;</span>
117 
-<span class="ss">  &lt;/PageFrame</span><span class="op">&gt;</span>
118 
-)
123 
+          <span class="kw">const</span> view <span class="op">=</span> (
124 
+          <span class="  ">  &lt;PageFrame&gt;</span>
125 
+          <span class="  ">    &lt;Fragment state</span><span class="op">={</span>state<span class="op">}</span> filterOn<span class="op">=</span><span class="st">&quot;menu&quot;</span><span>&gt;</span>
126 
+          <span class="  ">      &lt;Menu /&gt;</span>
127 
+          <span class="  ">    &lt;/Fragment&gt;</span>
128 
+          <span class="  ">  &lt;/PageFrame&gt;</span>
129 
+          )
119 130
120 
-<span class="co">// If menu is truthy, this renders as:</span>
131 
+          <span class="co">// If menu is truthy, this renders as:</span>
121 132
122 
-(
123 
-  <span class="op">&lt;</span>PageFrame<span class="op">&gt;</span>
124 
-    <span class="op">&lt;</span>Menu /<span class="op">&gt;</span>
125 
-  <span class="op">&lt;</span><span class="ss">/PageFrame&gt;</span>
126 
-<span class="sc">)</span>
133 
+          (
134 
+          <span class="  ">  &lt;PageFrame&gt;</span>
135 
+          <span class="  ">    &lt;Menu /&gt;</span>
136 
+          <span class="  ">  &lt;/PageFrame&gt;</span>
137 
+          <span class="sc">)</span>
127 138
128 
-<span class="ss">// If menu is falsy, this renders as:</span>
129 
-<span class="sc">(</span>
130 
-<span class="ss">  &lt;PageFrame&gt;</span>
131 
-<span class="ss">  &lt;/PageFrame</span><span class="op">&gt;</span>
132 
-)
139 
+          <span class="co">// If menu is falsy, this renders as:</span>
133 140
134 
-<span class="co">// If property is missing in path, it&#39;s falsy.</span>
141 
+          <span class="">(</span>
142 
+          <span class="">  &lt;PageFrame&gt;</span>
143 
+          <span class="">  &lt;/PageFrame&gt;</span>
144 
+          )
135 145
136 
-<span class="kw">const</span> view <span class="op">=</span> (
137 
-  <span class="op">&lt;</span>PageFrame<span class="op">&gt;</span>
138 
-      <span class="op">&lt;</span>Fragment state<span class="op">={</span>state<span class="op">}</span> filterOn<span class="op">=</span><span class="st">&quot;menu.missingProp.something&quot;</span><span class="op">&gt;</span>
139 
-        <span class="op">&lt;</span>Menu /<span class="op">&gt;</span>
140 
-      <span class="op">&lt;</span><span class="ss">/Fragment&gt;</span>
141 
-<span class="ss">  &lt;/PageFrame</span><span class="op">&gt;</span>
142 
-)
146 
+          <span class="co">// If property is missing in path, it&#39;s falsy.</span>
143 147
144 
-<span class="co">// Renders as: </span>
145 
-(
146 
-  <span class="op">&lt;</span>PageFrame<span class="op">&gt;</span>
147 
-  <span class="op">&lt;</span><span class="ss">/PageFrame&gt;</span>
148 
-<span class="sc">)</span></code></pre></div>
149 
-<p>Given that every UI state will be in your state tree as a function of your reducer logic, you can express any restriction on which parts of the UI display, even those that have nothing to do with the specific transformations caused by your URL actions.</p>
150 
-<p>See also the demo site in the <code>demos/</code> directory, to see routedux used in an application.</p>
151 
-</body>
148 
+          <span class="kw">const view =</span> (
149 
+          <span class="">  &lt;PageFrame&gt;</span>
150 
+          <span class="">    &lt;Fragment state</span><span class="op">={</span>state<span class="op">}</span> filterOn<span class="op">=</span><span class="st">&quot;menu.missingProp.something&quot;</span><span class="">&gt;</span>
151 
+          <span class="">      &lt;Menu /&gt;</span>
152 
+          <span class="">    &lt;/Fragment&gt;</span>
153 
+          <span class="">  &lt;/PageFrame&gt;</span>
154 
+          )
155 
+
156 
+          <span class="co">// Renders as: </span>
157 
+
158 
+          (
159 
+          <span class="">  &lt;PageFrame&gt;</span>
160 
+          <span class="">  &lt;/PageFrame&gt;</span>
161 
+          <span class="">)</span></code>
162 
+        </pre>
163 
+        <p>Given that every UI state will be in your state tree as a function of your reducer logic, you can express any restriction on which parts of the UI display, even those that have nothing to do with the specific transformations caused by your URL actions.</p>
164 
+        <p>See also the demo site in the <code>demos/</code> directory, to see routedux used in an application.</p>
165 
+      </section>
166 
+    </article>
167 
+  </body>
152 168 
 </html>