Switch to redux saga

.babelrc

@@ -9,6 +9,9 @@
                 "locals": ["module"]
                 }]
             }]]
+        },
+        "test": {
+            "plugins": ["istanbul"]
         }
     }
 }

config.js

@@ -9,6 +9,7 @@ var path    = require('path'),
 module.exports = {
     babel_polyfill             : 'node_modules/babel-polyfill/dist/polyfill.js',
     code_coverage_dir          : 'code-coverage-report/',
+    code_coverage_path         : path.resolve(__dirname, 'code-coverage-report'),
     code_coverage_lcov_sub_dir : 'report-lcov',
     code_coverage_sub_dir      : 'html',
     dist                       : 'dist',
@@ -20,15 +21,19 @@ module.exports = {
     json_path                  : srcPath + '/static/json/*.json',
     src_path                   : srcPath,
     src_static_path            : srcPath + '/static',
+    webpack_actions_path       : srcPath + '/modules/actions',
     webpack_client_regex       : /\.js$|\.jsx$/,
     webpack_components_path    : srcPath + '/components',
     webpack_constants_path     : srcPath + '/constants/constants.js',
     webpack_css_regex          : /\.css$/,
     webpack_dev_config         : './webpack.dev.config',
     webpack_dist_config        : './webpack.dist.config',
-    webpack_entry              : srcPath + '/index.jsx',
-    webpack_resolve_extensions : ['', '.js', '.jsx'],
+    webpack_entry              : ['babel-polyfill', srcPath + '/index.jsx'],
     webpack_exclude            : /node_modules/,
+    webpack_modules_path       : srcPath + '/modules',
+    webpack_reducers_path      : srcPath + '/modules/reducers',
+    webpack_resolve_extensions : ['', '.js', '.jsx'],
+    webpack_sagas_path         : srcPath + '/modules/sagas',
     webpack_test_config        : './webpack.test.config',
     webpack_test_context       : 'webpack/webpack.test.context.js',
     webpack_test_utils_path    : srcPath + '/utils/testUtils.js',

package.json

@@ -50,12 +50,13 @@
     "react-redux": "^4.4.5",
     "redux": "^3.6.0",
     "redux-logger": "^2.6.1",
-    "redux-thunk": "^2.1.0"
+    "redux-saga": "^0.11.1"
   },
   "devDependencies": {
     "autoprefixer": "^6.4.1",
     "babel-eslint": "^6.1.2",
     "babel-loader": "^6.2.5",
+    "babel-plugin-istanbul": "^2.0.1",
     "babel-plugin-react-transform": "^2.0.2",
     "babel-polyfill": "^6.13.0",
     "babel-preset-es2015": "^6.14.0",
@@ -76,7 +77,6 @@
     "eslint-plugin-react": "^6.2.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "html-webpack-plugin": "^2.22.0",
-    "istanbul-instrumenter-loader": "^0.2.0",
     "karma": "^1.2.0",
     "karma-chai": "^0.1.0",
     "karma-coverage": "^1.1.1",
@@ -95,7 +95,6 @@
     "react-addons-test-utils": "^15.3.1",
     "react-transform-hmr": "^1.0.4",
     "redux-mock-store": "^1.1.4",
-    "string-replace-webpack-plugin": "0.0.3",
     "style-loader": "^0.13.1",
     "webpack": "^1.13.2",
     "webpack-dashboard": "^0.1.8",

src/components/containers/Slideshow/Slideshow.jsx

@@ -44,12 +44,12 @@ const propTypes = {
         transition: React.PropTypes.oneOf(['slide', 'fade']).isRequired
     },
     mapStateToProps = state => ({
-        backgroundSize: state.SlideshowReducer.backgroundSize,
-        currentSlideIndex: state.SlideshowReducer.currentSlideIndex,
-        direction: state.SlideshowReducer.direction,
-        settingsPanel: state.SlideshowReducer.settingsPanel,
-        slides: state.SlideshowReducer.slides,
-        transition: state.SlideshowReducer.transition
+        backgroundSize: state.slideshowReducer.backgroundSize,
+        currentSlideIndex: state.slideshowReducer.currentSlideIndex,
+        direction: state.slideshowReducer.direction,
+        settingsPanel: state.slideshowReducer.settingsPanel,
+        slides: state.slideshowReducer.slides,
+        transition: state.slideshowReducer.transition
     });
 
 class Slideshow extends React.Component {

src/components/containers/Slideshow/SlideshowActions.js

@@ -1,23 +1,10 @@
 import { ACTIONS } from 'constants';
-import { jsonLoader } from 'utils';
 
 export default (dispatch) => ({
-    onRequestJSON: (filePath) => {
-        dispatch({
-            filePath,
-            type: ACTIONS.SLIDESHOW_JSON_REQUEST
-        });
-        return jsonLoader(filePath).then(
-            (parsedJSON) => dispatch({
-                parsedJSON,
-                type: ACTIONS.SLIDESHOW_JSON_RECEIVE
-            }),
-            (error) => dispatch({
-                error,
-                type: ACTIONS.SLIDESHOW_JSON_RECEIVE_ERROR
-            })
-        );
-    },
+    onRequestJSON: (filePath) => dispatch({
+        filePath,
+        type: ACTIONS.SLIDESHOW_JSON_REQUEST
+    }),
     onToggleSettings: () => dispatch({
         type: ACTIONS.SLIDESHOW_SETTINGS_TOGGLE
     })

src/components/containers/Slideshow/tests/Slideshow.spec.js

@@ -10,15 +10,15 @@ import Slideshow from '../Slideshow';
 describe('Slideshow', () => {
     const mockState = {
         noSlide: {
-            SlideshowReducer: {
+            slideshowReducer: {
                 backgroundSize: 'cover',
                 currentSlideIndex: 0,
                 direction: 'next',
                 transition: 'slide'
             }
         },
         slide: {
-            SlideshowReducer: {
+            slideshowReducer: {
                 backgroundSize: 'cover',
                 currentSlideIndex: 0,
                 direction: 'next',

src/components/containers/Slideshow/tests/SlideshowActions.spec.js

@@ -9,46 +9,23 @@ describe('SlideshowActions', () => {
         store = null;
     });
 
-    it(`Dispatches \`${ACTIONS.SLIDESHOW_JSON_REQUEST}\` and \`${ACTIONS.SLIDESHOW_JSON_RECEIVE}\` when \`requestJSON\` is called, and json is valid`, () => {
+    it(`Dispatches \`${ACTIONS.SLIDESHOW_JSON_REQUEST}\` when \`requestJSON\` is called`, (done) => {
         const filePath = 'src/static/json/mock-valid.json';
 
         store = mockStore({
             expectedActions: [
                 {
                     filePath,
                     type: ACTIONS.SLIDESHOW_JSON_REQUEST
-                },
-                {
-                    parsedJSON: { mock: 'mock' },
-                    type: ACTIONS.SLIDESHOW_JSON_RECEIVE
                 }
             ]
         });
 
-        return SlideshowActions(store.dispatch)
-            .onRequestJSON(filePath)
-            .then(store.testExpectedActions);
-    });
-
-    it(`Dispatches \`${ACTIONS.SLIDESHOW_JSON_REQUEST}\` and \`${ACTIONS.SLIDESHOW_JSON_RECEIVE_ERROR}\` when \`requestJSON\` is called, but json can not be loaded`, () => {
-        const filePath = '/mock/path.json';
+        SlideshowActions(store.dispatch).onRequestJSON(filePath);
 
-        store = mockStore({
-            expectedActions: [
-                {
-                    filePath,
-                    type: ACTIONS.SLIDESHOW_JSON_REQUEST
-                },
-                {
-                    error: {},
-                    type: ACTIONS.SLIDESHOW_JSON_RECEIVE_ERROR
-                }
-            ]
-        });
+        store.testExpectedActions();
 
-        return SlideshowActions(store.dispatch)
-            .onRequestJSON(filePath)
-            .then(store.testExpectedActions);
+        done();
     });
 
     it(`Dispatches \`${ACTIONS.SLIDESHOW_SETTINGS_TOGGLE}\` when \`toggleSettings\` is called`, (done) => {

src/modules/reducers/index.js

@@ -0,0 +1,5 @@
+import slideshowReducer from './slideshow/slideshowReducer';
+
+export default {
+    slideshowReducer
+};

src/components/containers/Slideshow/SlideshowReducer.js → src/modules/reducers/slideshow/slideshowReducer.js

@@ -26,7 +26,7 @@ export default function (state = defaultState, action = {}) {
         if (Array.isArray(action.parsedJSON)) {
             action.parsedJSON.forEach((slide) => {
                 slide.id = generateId();
-                slide.views = 0;
+                slide.views = 1; // seed with first view
             });
         }