Merge pull request #56 from rocjs/feature/redux-enhancers

Adds a way to add enhancers to the Redux store

examples/complex/roc.config.js

@@ -11,6 +11,7 @@ module.exports = {
             koaMiddlewares: 'src/koa-middlewares.js',
             redux: {
                 middlewares: 'src/middlewares.js',
+                enhancers: 'src/enhancers.js',
                 sagas: 'src/sagas.js',
             },
             reducers: 'src/reducers.js',

examples/complex/src/enhancers.js

@@ -0,0 +1,15 @@
+/* global __NODE__ __DEV__ */
+
+export default function getEnhancers() {
+    if (__NODE__) {
+        // Add server enhancers here
+    } else {
+        // Add client enhancers here
+    }
+
+    if (__DEV__) {
+        // Add dev enhancers here
+    }
+
+    return [];
+}

extensions/roc-package-web-app-react-dev/src/config/roc.config.js

@@ -6,6 +6,7 @@ export default {
             redux: {
                 useDefaultReducers: true,
                 middlewares: 'src/redux/middlewares.js',
+                enhancers: 'src/redux/enhancers.js',
                 useDefaultMiddlewares: true,
                 sagas: 'src/redux/sagas.js',
             },

extensions/roc-package-web-app-react-dev/src/config/roc.config.meta.js

@@ -40,6 +40,11 @@ export default {
                         'internally.',
                     validator: notEmpty(isPath),
                 },
+                enhancers: {
+                    description: 'The enhancers to use if no entry file is given, will use default entry files ' +
+                        'internally.',
+                    validator: notEmpty(isPath),
+                },
                 useDefaultMiddlewares: {
                     description: 'If Roc should use internally defined middlewares, please look at the ' +
                     ' documentation for what middlewares that are included.',

extensions/roc-package-web-app-react-dev/src/webpack/index.js

@@ -50,6 +50,17 @@ export default ({
         );
     }
 
+    const hasEnhancers = !!(buildSettings.redux.enhancers && fileExists(buildSettings.redux.enhancers));
+    if (hasEnhancers) {
+        const enhancers = getAbsolutePath(buildSettings.redux.enhancers);
+
+        newWebpackConfig.plugins.push(
+            new webpack.DefinePlugin({
+                REDUX_ENHANCERS: JSON.stringify(enhancers),
+            })
+        );
+    }
+
     const hasSagas = !!(buildSettings.redux.sagas && fileExists(buildSettings.redux.sagas));
     if (hasSagas) {
         const sagas = getAbsolutePath(buildSettings.redux.sagas);
@@ -107,6 +118,7 @@ export default ({
 
             HAS_REDUX_REDUCERS: hasReducers,
             HAS_REDUX_MIDDLEWARES: hasMiddlewares,
+            HAS_REDUX_ENHANCERS: hasEnhancers,
             HAS_REDUX_SAGA: hasSagas,
             HAS_CLIENT_LOADING: hasClientLoading,
             HAS_TEMPLATE_VALUES: hasTemplateValues,

extensions/roc-package-web-app-react/app/default/get-routes-and-store.js

@@ -1,5 +1,6 @@
 /* global REACT_ROUTER_ROUTES, REDUX_REDUCERS, HAS_REDUX_REDUCERS, HAS_REDUX_MIDDLEWARES, REDUX_MIDDLEWARES,
-    USE_DEFAULT_REDUX_REDUCERS, USE_DEFAULT_REDUX_MIDDLEWARES, USE_DEFAULT_REACT_ROUTER_ROUTES, __WEB__
+    USE_DEFAULT_REDUX_REDUCERS, USE_DEFAULT_REDUX_MIDDLEWARES, USE_DEFAULT_REACT_ROUTER_ROUTES, __WEB__,
+    HAS_REDUX_ENHANCERS, REDUX_ENHANCERS
 */
 /* eslint-disable global-require */
 
@@ -24,14 +25,20 @@ export default function getRoutesAndStore() {
             middlewares = middlewares.concat(require(REDUX_MIDDLEWARES).default());
         }
 
+        let enhancers;
+        if (HAS_REDUX_ENHANCERS) {
+            enhancers = require(REDUX_ENHANCERS).default();
+        }
+
         const reducers = {
             ...defaultReducers,
             ...require(REDUX_REDUCERS),
         };
 
         const storeCreator = createStore(
             reducers,
-            ...middlewares
+            middlewares,
+            enhancers
         );
 
         let replaceReducers = null;

extensions/roc-package-web-app-react/app/shared/flux/create-store.js

@@ -9,13 +9,14 @@ import { rocConfig } from '../universal-config';
  * Redux store creator
  *
  * @param {!object} reducers - Reducers that should be added to the store
- * @param {...function} middlewares - Redux middlewares that should be added to the store
+ * @param {function[]} middlewares - Redux middlewares that should be added to the store
+ * @param {function[]} enhancers - Redux enhancers that should be added to the store
  * @returns {function} A function that has the following interface:
  * `(callback) => (reduxReactRouter, getRoutes, createHistory, initialState)`.
  * The callback will be called when the application is in _DEV_ mode on the client as a way to add hot module update of
  * the reducers. The callback itself will take a function as the parameter that in turn takes the reducers to update.
  */
-export default function createReduxStore(reducers, ...middlewares) {
+export default function createReduxStore(reducers, middlewares = [], enhancers = []) {
     return (callback) =>
         (history, initialState) => {
             let finalCreateStore;
@@ -50,11 +51,13 @@ export default function createReduxStore(reducers, ...middlewares) {
                 finalCreateStore = compose(
                     applyMiddleware(...normalMiddlewares, ...debugMiddlewares),
                     devTools,
-                    persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
+                    persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)),
+                    ...enhancers
                 )(createStore);
             } else {
                 finalCreateStore = compose(
-                    applyMiddleware(...normalMiddlewares)
+                    applyMiddleware(...normalMiddlewares),
+                    ...enhancers
                 )(createStore);
             }