add redux-saga

Author: jokeyrhyme

config/_base.js

@@ -37,6 +37,7 @@ const config = {
     colors : true
   },
   compiler_vendor : [
+    'babel-polyfill',
     'classnames',
     'history',
     'immutable',

package.json

@@ -64,8 +64,9 @@
   "author": "David Zukowski <david@zuko.me> (http://zuko.me)",
   "license": "MIT",
   "dependencies": {
+    "babel-polyfill": "6.5.0",
     "better-npm-run": "0.0.7",
-    "classnames": "^2.2.3",
+    "classnames": "2.2.3",
     "co-request": "^1.0.0",
     "debug": "^2.2.0",
     "history": "^2.0.0",
@@ -83,6 +84,7 @@
     "react-router-redux": "^4.0.0-beta",
     "redux": "^3.0.0",
     "redux-immutable": "3.0.5",
+    "redux-saga": "0.9.1",
     "redux-thunk": "^1.0.0",
     "url": "^0.11.0",
     "yargs": "^4.1.0"

src/layouts/CoreLayout/CoreLayout.js

@@ -1,5 +1,6 @@
 import React, { PropTypes } from 'react';
 import 'normalize.css';
+
 import '../../styles/core.css';
 
 // Note: Stateless/function components *will not* hot reload!

src/main.js

@@ -1,8 +1,10 @@
+import 'babel-polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import createBrowserHistory from 'history/lib/createBrowserHistory';
 import { useRouterHistory } from 'react-router';
 import { syncHistoryWithStore } from 'react-router-redux';
+
 import makeRoutes from './routes';
 import Root from './containers/Root';
 import configureStore from './redux/configureStore';

src/redux/configureStore.js

@@ -1,12 +1,17 @@
 import { Map } from 'immutable';
 import { applyMiddleware, compose, createStore } from 'redux';
 import thunk from 'redux-thunk';
+import createSagaMiddleware from 'redux-saga';
 
 import rootReducer from './rootReducer';
+import { rootSaga } from './sagas';
 
 export default function configureStore (initialState = new Map()) {
   // Compose final middleware and use devtools in debug environment
-  let middleware = applyMiddleware(thunk);
+  let middleware = applyMiddleware(
+    createSagaMiddleware(rootSaga),
+    thunk
+  );
   if (__DEBUG__) {
     const devTools = window.devToolsExtension
       ? window.devToolsExtension()

src/redux/modules/counter.js

@@ -2,6 +2,7 @@
 // Constants
 // ------------------------------------
 export const COUNTER_INCREMENT = 'COUNTER_INCREMENT';
+export const COUNTER_TRIPLE = 'COUNTER_TRIPLE';
 
 // ------------------------------------
 // Actions
@@ -28,9 +29,12 @@ export const doubleAsync = () => {
   };
 };
 
+export const tripleSaga = () => ({ type: COUNTER_TRIPLE });
+
 export const actions = {
   increment,
-  doubleAsync
+  doubleAsync,
+  tripleSaga
 };
 
 // ------------------------------------

src/redux/sagas/index.js

@@ -0,0 +1,21 @@
+import { takeEvery } from 'redux-saga';
+import { fork, put, select } from 'redux-saga/effects';
+
+import { COUNTER_TRIPLE, increment } from '../modules/counter';
+
+function * counterTriple () {
+  let counter = yield select((state) => state.get('counter'));
+  yield put(increment(counter * 2));
+}
+
+function * watchCounterTriple () {
+  while (true) {
+    yield * takeEvery(COUNTER_TRIPLE, counterTriple);
+  }
+}
+
+export function * rootSaga () {
+  yield [
+    fork(watchCounterTriple)
+  ];
+}

src/views/HomeView/HomeView.js

@@ -2,20 +2,14 @@ import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
 
-import { increment, doubleAsync } from '../../redux/modules/counter';
+import { increment, doubleAsync, tripleSaga } from '../../redux/modules/counter';
 import DuckImage from './Duck.jpg';
 import classes from './HomeView.css';
 
 // We avoid using the `@connect` decorator on the class definition so
 // that we can export the undecorated component for testing.
 // See: http://rackt.github.io/redux/docs/recipes/WritingTests.html
 export class HomeView extends React.Component {
-  static propTypes = {
-    counter: PropTypes.number.isRequired,
-    doubleAsync: PropTypes.func.isRequired,
-    increment: PropTypes.func.isRequired
-  };
-
   render () {
     return (
       <div className='container text-center'>
@@ -35,19 +29,29 @@ export class HomeView extends React.Component {
         <button className='btn btn-default' onClick={this.props.increment}>
           Increment
         </button>
-        {' '}
         <button className='btn btn-default' onClick={this.props.doubleAsync}>
           Double (Async)
         </button>
+        <button className='btn btn-default' onClick={this.props.tripleSaga}>
+          Triple (Saga)
+        </button>
       </div>
     );
   }
 }
 
+HomeView.propTypes = {
+  counter: PropTypes.number.isRequired,
+  doubleAsync: PropTypes.func.isRequired,
+  increment: PropTypes.func.isRequired,
+  tripleSaga: PropTypes.func.isRequired
+};
+
 const mapStateToProps = (state) => ({
   counter: state.get('counter')
 });
 export default connect((mapStateToProps), {
   increment: () => increment(1),
-  doubleAsync
+  doubleAsync,
+  tripleSaga
 })(HomeView);

tests/test-bundler.js

@@ -1,6 +1,7 @@
 // ---------------------------------------
 // Test Environment Setup
 // ---------------------------------------
+import 'babel-polyfill';
 import sinon from 'sinon';
 import chai from 'chai';
 import sinonChai from 'sinon-chai';