Merge pull request acdlite#55 from acdlite/better-server-rendering

Throw if routes not given to enhancer when server rendering

Author: acdlite

src/__tests__/ReduxRouter-test.js

@@ -140,6 +140,21 @@ describe('<ReduxRouter>', () => {
       }));
     });
 
+    it('throws if routes are not passed to store enhancer', () => {
+      const reducer = combineReducers({
+        router: routerStateReducer
+      });
+
+      expect(() => server.reduxReactRouter()(createStore)(reducer))
+        .to.throw(
+          'When rendering on the server, routes must be passed to the '
+        + 'reduxReactRouter() store enhancer; routes as a prop or as children '
+        + 'of <ReduxRouter> is not supported. To deal with circular '
+        + 'dependencies between routes and the store, use the '
+        + 'option getRoutes(store).'
+        );
+    });
+
     it('handles redirects', () => {
       const reducer = combineReducers({
         router: routerStateReducer

src/__tests__/reduxReactRouter-test.js

@@ -140,6 +140,29 @@ describe('reduxRouter()', () => {
     expect(store.getState().string).to.equal('Unidirectional');
   });
 
+  describe('getRoutes()', () => {
+    it('is passed dispatch and getState', () => {
+      const reducer = combineReducers({
+        router: routerStateReducer
+      });
+
+      let store;
+      const history = createHistory();
+
+      reduxReactRouter({
+        history,
+        getRoutes: s => {
+          store = s;
+          return routes;
+        }
+      })(createStore)(reducer);
+
+      store.dispatch(pushState(null, '/parent/child/123', { key: 'value'}));
+      expect(store.getState().router.location.pathname)
+        .to.equal('/parent/child/123');
+    });
+  });
+
   describe('onEnter hook', () => {
     it('can perform redirects', () => {
       const reducer = combineReducers({

src/client.js

@@ -5,7 +5,7 @@ import reduxReactRouter from './reduxReactRouter';
 import useDefaults from './useDefaults';
 import routeReplacement from './routeReplacement';
 
-function client(next) {
+function historySynchronization(next) {
   return options => createStore => (reducer, initialState) => {
     const { onError, routerStateSelector } = options;
     const store = next(options)(createStore)(reducer, initialState);
@@ -47,5 +47,5 @@ function client(next) {
 export default compose(
   useDefaults,
   routeReplacement,
-  client
+  historySynchronization
 )(reduxReactRouter);

src/routeReplacement.js

@@ -6,6 +6,7 @@ export default function routeReplacement(next) {
   return options => createStore => (reducer, initialState) => {
     const {
       routes: baseRoutes,
+      getRoutes,
       routerStateSelector
     } = options;
 
@@ -30,9 +31,16 @@ export default function routeReplacement(next) {
       }
     }
 
-    const routes = baseRoutes
-      ? baseRoutes
-      : [{
+    let routes;
+    if (baseRoutes) {
+      routes = baseRoutes;
+    } else if (getRoutes) {
+      routes = getRoutes({
+        dispatch: action => store.dispatch(action),
+        getState: () => store.getState()
+      });
+    } else {
+      routes = [{
         getChildRoutes: (location, cb) => {
           if (!areChildRoutesResolved) {
             childRoutesCallbacks.push(cb);
@@ -42,6 +50,7 @@ export default function routeReplacement(next) {
           cb(null, childRoutes);
         }
       }];
+    }
 
     store = compose(
       applyMiddleware(

src/server.js

@@ -6,7 +6,22 @@ import routeReplacement from './routeReplacement';
 import matchMiddleware from './matchMiddleware';
 import { MATCH } from './constants';
 
-function server(next) {
+function serverInvariants(next) {
+  return options => createStore => {
+    if (!options || !(options.routes || options.getRoutes)) {
+      throw new Error(
+        'When rendering on the server, routes must be passed to the '
+      + 'reduxReactRouter() store enhancer; routes as a prop or as children of '
+      + '<ReduxRouter> is not supported. To deal with circular dependencies '
+      + 'between routes and the store, use the option getRoutes(store).'
+      );
+    }
+
+    return next(options)(createStore);
+  };
+}
+
+function matching(next) {
   return options => createStore => (reducer, initialState) => {
     const store = compose(
       applyMiddleware(
@@ -32,7 +47,8 @@ export function match(url, callback) {
 }
 
 export const reduxReactRouter = compose(
+  serverInvariants,
   useDefaults,
   routeReplacement,
-  server
+  matching
 )(baseReduxReactRouter);