Merge pull request #34 from rocjs/feature/redux-saga-support

redux-saga support
rocjs · Oct 13, 2016 · 86b481b · 86b481b
2 parents 518f9c5 + 92c54c9
commit 86b481b
Show file tree

Hide file tree

Showing 14 changed files with 78 additions and 5 deletions.
diff --git a/examples/complex/roc.config.js b/examples/complex/roc.config.js
@@ -11,6 +11,7 @@ module.exports = {
             koaMiddlewares: 'src/koa-middlewares.js',
             redux: {
                 middlewares: 'src/middlewares.js',
+                sagas: 'src/sagas.js',
             },
             reducers: 'src/reducers.js',
             routes: 'src/routes.js',

diff --git a/examples/complex/src/components/about/index.js b/examples/complex/src/components/about/index.js
@@ -14,6 +14,7 @@ import { provideHooks } from 'redial';
     }),
     defer: (locals) => {
         locals.setProps({color: 'red'});
+        locals.dispatch({ type: 'CLICKED_ASYNC' });
     },
 })
 export default class About extends Component {

diff --git a/examples/complex/src/components/main/index.js b/examples/complex/src/components/main/index.js
@@ -40,7 +40,9 @@ function mapDispatchToProps(dispatch) {
 }
 
 // fetch triggers on both server and client
-@provideHooks({ fetch: prefetchRepos })
+@provideHooks({
+    fetch: prefetchRepos
+})
 // mergeReposProps enriches dispatch props with reposForceFetch
 @connect(mapStateToProps, mapDispatchToProps, mergeReposProps)
 export default class Main extends React.Component {

diff --git a/examples/complex/src/sagas.js b/examples/complex/src/sagas.js
@@ -0,0 +1,12 @@
+import { takeEvery } from 'redux-saga'
+import { put, call } from 'redux-saga/effects'
+import { delay } from 'redux-saga'
+
+export function* incrementAsync() {
+    yield call(delay, 1000)
+    yield put({type: 'CLICKED'})
+}
+
+export default function* rootSaga() {
+    yield* takeEvery('CLICKED_ASYNC', incrementAsync)
+}
diff --git a/extensions/roc-package-web-app-react-dev/src/config/roc.config.js b/extensions/roc-package-web-app-react-dev/src/config/roc.config.js
@@ -7,6 +7,7 @@ export default {
                 useDefaultReducers: true,
                 middlewares: 'src/redux/middlewares.js',
                 useDefaultMiddlewares: true,
+                sagas: 'src/redux/sagas.js',
             },
 
             // Will be moved to redux above eventually, now kept here to make the template upgradable

diff --git a/extensions/roc-package-web-app-react-dev/src/config/roc.config.meta.js b/extensions/roc-package-web-app-react-dev/src/config/roc.config.meta.js
@@ -45,6 +45,10 @@ export default {
                     ' documentation for what middlewares that are included.',
                     validator: required(isBoolean),
                 },
+                sagas: {
+                    description: 'The Redux Saga to use as the root saga.',
+                    validator: notEmpty(isPath),
+                },
             },
             clientLoading: {
                 description: 'The React component to use on the first client load while fetching data, will only ' +

diff --git a/extensions/roc-package-web-app-react-dev/src/webpack/index.js b/extensions/roc-package-web-app-react-dev/src/webpack/index.js
@@ -47,6 +47,17 @@ export default ({
         );
     }
 
+    const hasSagas = !!(buildSettings.redux.sagas && fileExists(buildSettings.redux.sagas));
+    if (hasSagas) {
+        const sagas = getAbsolutePath(buildSettings.redux.sagas);
+
+        newWebpackConfig.plugins.push(
+            new webpack.DefinePlugin({
+                REDUX_SAGAS: JSON.stringify(sagas),
+            })
+        );
+    }
+
     const hasClientLoading = !!(buildSettings.clientLoading && fileExists(buildSettings.clientLoading));
     if (hasClientLoading) {
         const clientLoading = getAbsolutePath(buildSettings.clientLoading);
@@ -77,6 +88,7 @@ export default ({
 
             HAS_REDUX_REDUCERS: hasReducers,
             HAS_REDUX_MIDDLEWARES: hasMiddlewares,
+            HAS_REDUX_SAGA: hasSagas,
             HAS_CLIENT_LOADING: hasClientLoading,
             HAS_TEMPLATE_VALUES: hasTemplateValues,
         })

diff --git a/extensions/roc-package-web-app-react/app/client/create-client.js b/extensions/roc-package-web-app-react/app/client/create-client.js
@@ -1,4 +1,5 @@
-/* global __DEV__, HAS_CLIENT_LOADING, ROC_CLIENT_LOADING, ROC_PATH, HAS_REDUX_REDUCERS, document, window */
+/* global __DEV__, HAS_CLIENT_LOADING, ROC_CLIENT_LOADING, ROC_PATH, HAS_REDUX_REDUCERS, document, window,
+ HAS_REDUX_SAGA, REDUX_SAGAS */
 /* eslint-disable global-require */
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -98,6 +99,11 @@ export default function createClient({ createRoutes, createStore, mountNode }) {
             const { syncHistoryWithStore } = require('react-router-redux');
 
             const store = createStore(history, window.FLUX_STATE);
+
+            if (HAS_REDUX_SAGA) {
+                store.runSaga(require(REDUX_SAGAS).default);
+            }
+
             history = syncHistoryWithStore(history, store, {
                 // We do not want to use adjustUrlOnReplay if the browser does
                 // not support the history API with pushState since this can lead

diff --git a/extensions/roc-package-web-app-react/app/server/useReact.js b/extensions/roc-package-web-app-react/app/server/useReact.js
@@ -1,4 +1,4 @@
-/* global __DIST__, __DEV__ HAS_TEMPLATE_VALUES, TEMPLATE_VALUES, ROC_PATH */
+/* global __DIST__, __DEV__ HAS_TEMPLATE_VALUES, TEMPLATE_VALUES, ROC_PATH, HAS_REDUX_SAGA, REDUX_SAGAS */
 
 import useReactLib from 'roc-package-web-app-react/lib/app/server/useReact';
 
@@ -7,12 +7,19 @@ import Header from '../shared/header';
 export default function useReact(createServer) {
     // eslint-disable-next-line
     const templateValues = HAS_TEMPLATE_VALUES ? require(TEMPLATE_VALUES) : undefined;
+    let reduxSagas;
+
+    if (HAS_REDUX_SAGA) {
+        reduxSagas = require(REDUX_SAGAS).default; // eslint-disable-line
+    }
+
     return useReactLib(createServer, {
         dev: __DEV__,
         dist: __DIST__,
         hasTemplateValues: HAS_TEMPLATE_VALUES,
         templateValues,
         rocPath: ROC_PATH,
         Header,
+        reduxSagas,
     });
 }
diff --git a/extensions/roc-package-web-app-react/app/shared/flux/create-store.js b/extensions/roc-package-web-app-react/app/shared/flux/create-store.js
@@ -1,4 +1,4 @@
-/* globals __DEV__, __WEB__, window */
+/* globals __DEV__, __WEB__, window, HAS_REDUX_SAGA */
 
 import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
 import { routerMiddleware, routerReducer } from 'react-router-redux';
@@ -20,6 +20,14 @@ export default function createReduxStore(reducers, ...middlewares) {
         (history, initialState) => {
             let finalCreateStore;
             const normalMiddlewares = [].concat(middlewares);
+            let sagaMiddleware;
+
+            // redux-saga
+            if (HAS_REDUX_SAGA) {
+                const createSagaMiddleware = require('redux-saga').default; // eslint-disable-line
+                sagaMiddleware = createSagaMiddleware();
+                normalMiddlewares.push(sagaMiddleware);
+            }
 
             // Add the react-router-redux middleware
             normalMiddlewares.push(routerMiddleware(history));
@@ -68,6 +76,10 @@ export default function createReduxStore(reducers, ...middlewares) {
                 });
             }
 
+            if (sagaMiddleware) {
+                store.runSaga = sagaMiddleware.run;
+            }
+
             return store;
         };
 }
diff --git a/extensions/roc-package-web-app-react/package.json b/extensions/roc-package-web-app-react/package.json
@@ -42,6 +42,7 @@
     "react-server-status": "~1.0.0",
     "redial": "~0.4.1",
     "redux": "~3.4.0",
+    "redux-saga": "0.12.0",
     "redux-thunk": "~2.1.0",
     "roc": "^1.0.0-rc.12",
     "roc-package-web-app": "^1.0.0-beta.3",

diff --git a/extensions/roc-package-web-app-react/src/app/server/reactRenderer.js b/extensions/roc-package-web-app-react/src/app/server/reactRenderer.js
@@ -79,6 +79,7 @@ export function reactRender({
     staticRender = false,
     hasTemplateValues,
     templateValues,
+    reduxSagas,
 }) {
     return new Promise((resolve) => {
         match({ history, routes: createRoutes(store), location: url },
@@ -109,10 +110,21 @@ export function reactRender({
 
                 const hooks = rocConfig.runtime.fetch.server;
 
+                let sagaPromise;
+                if (reduxSagas) {
+                    sagaPromise = store.runSaga(reduxSagas).done;
+                }
+
                 return triggerHooks({
                     renderProps,
                     hooks,
                     locals,
+                }).then((result) => {
+                    if (sagaPromise) {
+                        store.dispatch(require('redux-saga').END); // eslint-disable-line
+                        return sagaPromise.then(() => result);
+                    }
+                    return result;
                 }).then(({ redialMap, redialProps }) => {
                     let component = <RedialContext {...renderProps} redialMap={redialMap} />;
 

diff --git a/extensions/roc-package-web-app-react/src/app/server/reactRouter.js b/extensions/roc-package-web-app-react/src/app/server/reactRouter.js
@@ -18,6 +18,7 @@ export default function reactRouter({
     templateValues,
     rocPath,
     Header,
+    reduxSagas,
 }) {
     const rocConfig = getSettings();
 
@@ -70,6 +71,7 @@ export default function reactRouter({
                     koaState: this.state,
                     hasTemplateValues,
                     templateValues,
+                    reduxSagas,
                 });
 
                 if (redirect) {

diff --git a/extensions/roc-package-web-app-react/src/roc/index.js b/extensions/roc-package-web-app-react/src/roc/index.js
@@ -23,7 +23,7 @@ export default {
             'react-router-redux',
             'react-server-status',
             'redial',
-
+            'redux-saga',
             'react-router-redial',
             'redux',
             'redux-thunk',