Update docs with new enhancer/middleware factory methods

ADVANCED.md

@@ -5,16 +5,19 @@
 
 Make sure to read http://redux.js.org/docs/recipes/ServerRendering.html to understand how the server/client Redux boilerplate works.
 
-Here's what the setup looks like on the server:
+Here's what the setup looks like on the server (assuming Node 4 LTS):
 
 ```js
 const express = require('express');
 const app = express();
-
-const createStore = require('redux').createStore;
 const routerForExpress = require('redux-little-router')
   .routerForExpress;
 
+const redux = require('redux');
+const createStore = redux.createStore;
+const compose = redux.compose;
+const applyMiddleware = redux.applyMiddleware;
+
 const routes = {
   '/': {
     '/whatever': {
@@ -24,19 +27,27 @@ const routes = {
 };
 
 app.use('/*', (req, res) => {
-  // Create the Redux store, passing in the
-  // Express request to the store enhancer.
+  // Create the Redux store, passing in the Express
+  // request to the routerForExpress factory.
   // 
   // If you're using an Express sub-router,
   // routerForExpress will infer the basename
   // from req.baseUrl!
+  // 
+  const router = routerForExpress({
+    routes,
+    request: req
+  })
+
   const store = createStore(
     state => state,
     { what: 'ever' },
-    routerForExpress({
-      routes,
-      request: req
-    })
+    compose(
+      router.routerEnhancer,
+      applyMiddleware(
+        router.routerMiddleware
+      )
+    )
   );
 
   // ...then renderToString() your components as usual,
@@ -51,7 +62,7 @@ app.use('/*', (req, res) => {
 There's not much involved on the client side, post-server render:
 
 ```js
-import { createStore } from 'redux';
+import { createStore, compose, applyMiddleware } from 'redux';
 import { routerForBrowser } from 'redux-little-router';
 
 // The same routes that you used on the server.
@@ -64,10 +75,18 @@ const routes = {
   }
 };
 
+const {
+  routerEnhancer,
+  routerMiddleware
+} = routerForBrowser({ routes });
+
 const store = createStore(
   yourReducer,
   window.__INITIAL_STATE,
-  routerForBrowser({ routes })
+  compose(
+    routerEnhancer,
+    applyMiddleware(routerMiddleware)
+  )
 );
 
 // ...then render() your components as usual,

README.md

@@ -27,7 +27,7 @@ While React Router is a great, well-supported library, it hoards URL state withi
 
 ## Redux usage
 
-To hook into Redux applications, `redux-little-router` uses a store enhancer that wraps the `history` module and adds current and previous router state to your store. The enhancer listens for location changes and dispatches rich actions containing the URL, parameters, and any custom data assigned to the route. It also intercepts navigation actions and calls their equivalent method in `history`.
+To hook into Redux applications, `redux-little-router` uses a store enhancer that wraps the `history` module and adds current and previous router state to your store. The enhancer listens for location changes and dispatches rich actions containing the URL, parameters, and any custom data assigned to the route. `redux-little-router` also adds a middleware that intercepts navigation actions and calls their equivalent method in `history`.
 
 ### Wiring up the boilerplate
 
@@ -67,16 +67,26 @@ const routes = {
   }
 };
 
-// Install the router into the store for a browser-only environment
+// Install the router into the store for a browser-only environment.
+// routerForBrowser is a factory method that returns a store
+// enhancer and a middleware.
+const {
+  routerEnhancer,
+  routerMiddleware  
+} = routerForBrowser({
+  // The configured routes. Required.
+  routes,
+  // The basename for all routes. Optional.
+  basename: '/example'
+})
+
 const clientOnlyStore = createStore(
   yourReducer,
   initialState,
-  routerForBrowser({
-    // The configured routes. Required.
-    routes,
-    // The basename for all routes. Optional.
-    basename: '/example'
-  })
+  compose(
+    routerEnhancer,
+    applyMiddleware(routerMiddleware)
+  )
 );
 ```