rename router.enhancer to router.connect

Author: Ville Saukkonen

ADVANCED.md

@@ -37,16 +37,18 @@ app.use('/*', (req, res) => {
   // routerForExpress will infer the basename
   // from req.baseUrl!
   // 
-  const { reducer, middleware, enhancer } = routerForExpress({
+  const { reducer, middleware, connect } = routerForExpress({
     routes,
     request: req
   })
 
   const store = createStore(
     combineReducers({ router: reducer }),
     { what: 'ever' },
-    compose(enhancer, applyMiddleware(middleware))
+    applyMiddleware(middleware)
   );
+  
+  connect(store);
 
   // ...then renderToString() your components as usual,
   // passing your new store to your <Provider> component.
@@ -86,16 +88,18 @@ server.route({
 		// Create the Redux store, passing in the Hapi
 		// request to the routerForHapi factory.
 
-		const { reducer, middleware, enhancer } = routerForHapi({
+		const { reducer, middleware, connect } = routerForHapi({
 			routes,
 			request
 		})
 
 		const store = createStore(
 			reducer,
 			{ what: 'ever' },
-			compose(enhancer, applyMiddleware(middleware))
+			applyMiddleware(middleware)
 		);
+		
+		connect(store);
 
 		// ...then renderToString() your components as usual,
 		// passing your new store to your <Provider> component.
@@ -125,16 +129,18 @@ const routes = {
 
 const {
   reducer,
-  enhancer,
+  connect,
   middleware
 } = routerForBrowser({ routes });
 
 const store = createStore(
   combineReducers({ router: reducer }),
   window.__INITIAL_STATE,
-  compose(enhancer, applyMiddleware(middleware))
+  applyMiddleware(middleware)
 );
 
+connect(store);
+
 // ...then render() your components as usual,
 // passing your new store to your <Provider> component.
 ```

README.md

@@ -28,7 +28,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. `redux-little-router` also adds a middleware that intercepts navigation actions and calls their equivalent method in `history`.
+To connect into Redux applications, `redux-little-router` uses a store connector that wraps the `history` module and adds current and previous router state to your store. The connector 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
 
@@ -72,11 +72,11 @@ const routes = {
 
 // Install the router into the store for a browser-only environment.
 // routerForBrowser is a factory method that returns a store
-// enhancer and a middleware.
+// connect and a middleware.
 const {
   reducer,
   middleware,
-  enhancer
+  connect
 } = routerForBrowser({
   // The configured routes. Required.
   routes,
@@ -87,11 +87,13 @@ const {
 const clientOnlyStore = createStore(
   combineReducers({ router: reducer, yourReducer }),
   initialState,
-  compose(enhancer, applyMiddleware(middleware))
+  applyMiddleware(middleware)
 );
+
+connect(clientOnlyStore);
 ```
 
-Often, you'll want to update state or trigger side effects after loading the initial URL. To maintain compatibility with other store enhancers (particularly ones that handle side effects, like `redux-loop` or `redux-saga`), we require this optional initial dispatch to happen in client code by doing the following:
+Often, you'll want to update state or trigger side effects after loading the initial URL. To maintain compatibility with store enhancers (particularly ones that handle side effects, like `redux-loop` or `redux-saga`), we require this optional initial dispatch to happen in client code by doing the following:
 
 ```js
 import { initializeCurrentLocation } from 'redux-little-router';
@@ -164,7 +166,7 @@ export const redirect = href => dispatch => {
 };
 ```
 
-On location changes, the store enhancer dispatches a `LOCATION_CHANGED` action that contains at least the following properties:
+On location changes, the router connector dispatches a `LOCATION_CHANGED` action that contains at least the following properties:
 
 ```js
 // For a URL matching /messages/:user

demo/client/app.js

@@ -10,7 +10,7 @@ import routes from './routes';
 import wrap from './wrap';
 import Demo from './demo';
 
-const { reducer, enhancer, middleware } = routerForBrowser({ routes });
+const { reducer, connect, middleware } = routerForBrowser({ routes });
 
 const store = createStore(
   combineReducers({ router: reducer }),
@@ -22,7 +22,7 @@ const store = createStore(
     window.devToolsExtension ? window.devToolsExtension() : f => f
   )
 );
-enhancer(store);
+connect(store);
 const initialLocation = store.getState().router;
 if (initialLocation) {
   store.dispatch(initializeCurrentLocation(initialLocation));

demo/server/index.js

@@ -85,7 +85,7 @@ app.get('/*', (req, res) => {
     applyMiddleware(router.middleware)
   );
 
-  router.enhancer(store);
+  router.connect(store);
   const content = renderToString(wrap(store)(Root));
 
   return res.send(

src/enhancer.js renamed to src/connector.js

@@ -10,13 +10,13 @@ import { locationDidChange, didReplaceRoutes, replace } from './actions';
 
 import matchCache from './util/match-cache';
 
-type EnhancerArgs = {|
+type ConnectorArgs = {|
   history: History,
   matchRoute: Function,
   createMatcher: Function
 |};
 
-export default ({ history, matchRoute, createMatcher }: EnhancerArgs) => (
+export default ({ history, matchRoute, createMatcher }: ConnectorArgs) => (
   store: Store<*, *>
 ) => {
   let currentMatcher = matchRoute;

src/install.js

@@ -4,7 +4,7 @@ import type { Location } from './types';
 
 import reducer from './reducer';
 import middleware from './middleware';
-import enhancer from './enhancer';
+import connector from './connector';
 
 import { default as matcherFactory } from './util/create-matcher';
 import validateRoutes from './util/validate-routes';
@@ -36,7 +36,7 @@ export default ({
       }
     }),
     middleware: middleware({ history }),
-    enhancer: enhancer({
+    connect: connector({
       history,
       matchRoute,
       createMatcher

test/enhancer.spec.js

@@ -11,7 +11,7 @@ import defaultRoutes from './test-util/fixtures/routes';
 
 chai.use(sinonChai);
 
-describe('Router store enhancer', () => {
+describe('Router store connector', () => {
   let store;
   let historyStub;
   let listenStub;
@@ -24,7 +24,7 @@ describe('Router store enhancer', () => {
     const replace = sandbox.spy(() => listen(listenStub));
     historyStub = { push, replace, listen };
 
-    const { reducer, middleware, enhancer } = install({
+    const { reducer, middleware, connect } = install({
       routes: defaultRoutes,
       history: historyStub,
       location: { pathname: '/' }
@@ -35,7 +35,7 @@ describe('Router store enhancer', () => {
       {},
       applyMiddleware(middleware)
     );
-    enhancer(store);
+    connect(store);
     sandbox.spy(store, 'dispatch');
   });
 

test/environment/browser-router.spec.js

@@ -10,8 +10,8 @@ import routes from '../test-util/fixtures/routes';
 chai.use(sinonChai);
 
 describe('Browser router', () => {
-  it('creates a browser store enhancer using history location', () => {
-    const { enhancer, middleware, reducer } = routerForBrowser({
+  it('creates a browser store connector using history location', () => {
+    const { connect, middleware, reducer } = routerForBrowser({
       routes,
       history: {
         location: {
@@ -27,7 +27,7 @@ describe('Browser router', () => {
       {},
       applyMiddleware(middleware)
     );
-    enhancer(store);
+    connect(store);
     const state = store.getState();
     expect(state).to.have.nested.property('router.pathname', '/home');
     expect(state).to.have.nested.property('router.search', '?get=schwifty');
@@ -38,7 +38,7 @@ describe('Browser router', () => {
   });
 
   it('supports basenames', () => {
-    const { enhancer, middleware, reducer } = routerForBrowser({
+    const { connect, middleware, reducer } = routerForBrowser({
       routes,
       basename: '/cob-planet',
       history: {
@@ -55,7 +55,7 @@ describe('Browser router', () => {
       {},
       applyMiddleware(middleware)
     );
-    enhancer(store);
+    connect(store);
     const state = store.getState();
     expect(state).to.have.nested.property('router.basename', '/cob-planet');
     expect(state).to.have.nested.property('router.pathname', '/home');

test/environment/express-router.spec.js

@@ -10,8 +10,8 @@ import routes from '../test-util/fixtures/routes';
 chai.use(sinonChai);
 
 describe('Express router', () => {
-  it('creates a server store enhancer using Express request object', () => {
-    const { enhancer, middleware, reducer } = routerForExpress({
+  it('creates a server store connector using Express request object', () => {
+    const { connect, middleware, reducer } = routerForExpress({
       routes,
       request: {
         path: '/home',
@@ -23,7 +23,7 @@ describe('Express router', () => {
       {},
       applyMiddleware(middleware)
     );
-    enhancer(store);
+    connect(store);
     const state = store.getState();
     expect(state).to.have.nested.property('router.pathname', '/home');
     expect(state).to.have.nested.property('router.search', '?get=schwifty');
@@ -33,7 +33,7 @@ describe('Express router', () => {
   });
 
   it('supports basenames', () => {
-    const { enhancer, middleware, reducer } = routerForExpress({
+    const { connect, middleware, reducer } = routerForExpress({
       routes,
       request: {
         baseUrl: '/cob-planet',
@@ -46,7 +46,7 @@ describe('Express router', () => {
       {},
       applyMiddleware(middleware)
     );
-    enhancer(store);
+    connect(store);
     const state = store.getState();
     expect(state).to.have.nested.property('router.basename', '/cob-planet');
     expect(state).to.have.nested.property('router.pathname', '/home');

test/environment/hapi-router.spec.js

@@ -10,8 +10,8 @@ import routes from '../test-util/fixtures/routes';
 chai.use(sinonChai);
 
 describe('Hapi router', () => {
-  it('creates a server store enhancer using Hapi request object', () => {
-    const { enhancer, middleware, reducer } = routerForHapi({
+  it('creates a server store connector using Hapi request object', () => {
+    const { connect, middleware, reducer } = routerForHapi({
       routes,
       request: {
         path: '/home',
@@ -23,7 +23,7 @@ describe('Hapi router', () => {
       {},
       applyMiddleware(middleware)
     );
-    enhancer(store);
+    connect(store);
     const state = store.getState();
     expect(state).to.have.nested.property('router.pathname', '/home');
     expect(state).to.have.nested.property('router.search', '?get=schwifty');

test/environment/hash-router.spec.js

@@ -10,15 +10,15 @@ import routes from '../test-util/fixtures/routes';
 chai.use(sinonChai);
 
 describe('Hash router', () => {
-  it('creates a browser store enhancer using window.location', () => {
+  it('creates a browser store connector using window.location', () => {
     const history = {
       listen() {},
       location: {
         pathname: '/home',
         search: '?get=schwifty'
       }
     };
-    const { enhancer, middleware, reducer } = routerForHash({
+    const { connect, middleware, reducer } = routerForHash({
       routes,
       history
     });
@@ -27,7 +27,7 @@ describe('Hash router', () => {
       {},
       applyMiddleware(middleware)
     );
-    enhancer(store);
+    connect(store);
     const state = store.getState();
     expect(state).to.have.nested.property('router.pathname', '/home');
     expect(state).to.have.nested.property('router.search', '?get=schwifty');
@@ -45,7 +45,7 @@ describe('Hash router', () => {
       }
     };
 
-    const { enhancer, middleware, reducer } = routerForHash({
+    const { connect, middleware, reducer } = routerForHash({
       routes,
       history,
       basename: '/cob-planet'
@@ -55,7 +55,7 @@ describe('Hash router', () => {
       {},
       applyMiddleware(middleware)
     );
-    enhancer(store);
+    connect(store);
     const state = store.getState();
     expect(state).to.have.nested.property('router.basename', '/cob-planet');
     expect(state).to.have.nested.property('router.pathname', '/home');