simplifying how redux action handlers are used in components

src/components/Slide/Slide.jsx

@@ -13,7 +13,7 @@ import {
 } from 'react-redux';
 
 // actions this view can dispatch
-import * as SlideActions from './SlideActions.js';
+import SlideActions from './SlideActions.js';
 
 // children components
 import SlideInfo from '../SlideInfo/SlideInfo.jsx';
@@ -25,7 +25,7 @@ import styles from './Slide.css';
 class Slide extends React.Component {
 
     componentWillMount() {
-        this.props.actions.onSlideView(this.props.id);
+        this.props.onSlideView(this.props.id);
     }
 
     render() {
@@ -47,35 +47,18 @@ class Slide extends React.Component {
     }
 }
 
-// MAP PROPS ///////////////////////////////////////
-const
-
-    // takes redux state as an input and remaps it to this.props for this component
-    mapStateToProps = (state) => ({
-        SlideshowSettingsReducer: state.SlideshowSettingsReducer
-    }),
-
-    // takes redux dispatch function as an input and remaps it to this.props for this component
-    mapDispatchToProps = (dispatch) => ({
-        actions: {
-            onSlideView: (id) => {
-                dispatch(SlideActions.view(id));
-            }
-        }
-    });
-
 // validate that this component is passed the properties it expects
 Slide.propTypes = {
     SlideshowSettingsReducer: React.PropTypes.shape({
         backgroundSize: React.PropTypes.oneOf(['cover', 'contain'])
     }).isRequired,
-    actions: React.PropTypes.shape({
-        onSlideView: React.PropTypes.func.isRequired
-    }).isRequired,
     id: React.PropTypes.string.isRequired,
+    onSlideView: React.PropTypes.func.isRequired,
     src: React.PropTypes.string.isRequired,
     views: React.PropTypes.number.isRequired
 };
 
 // export the redux-connected component
-export default connect(mapStateToProps, mapDispatchToProps)(Slide);
+export default connect((state) => ({
+    SlideshowSettingsReducer: state.SlideshowSettingsReducer
+}), SlideActions)(Slide);

src/components/Slide/SlideActions.js

@@ -1,11 +1,8 @@
 import { ACTIONS } from 'constants';
 
-const
-    view = (id) => ({
+export default (dispatch) => ({
+    onSlideView: (id) => dispatch({
         id,
         type: ACTIONS.SLIDE_VIEW
-    });
-
-module.exports = {
-    view
-};
+    })
+});

src/components/Slideshow/Slideshow.jsx

@@ -13,8 +13,13 @@ import {
     connect
 } from 'react-redux';
 
+// constants
+import {
+    JSON_PATH
+} from 'constants';
+
 // actions this view can dispatch
-import * as SlideshowActions from './SlideshowActions.js';
+import SlideshowActions from './SlideshowActions.js';
 
 // children
 import SlideTransition from '../SlideTransition/SlideTransition.jsx';
@@ -30,7 +35,7 @@ class Slideshow extends React.Component {
 
     componentDidMount() {
         if (!this.props.SlideshowReducer.slides) {
-            this.props.actions.onRequestJSON();
+            this.props.onRequestJSON(JSON_PATH);
         }
     }
 
@@ -66,24 +71,6 @@ class Slideshow extends React.Component {
     }
 }
 
-const
-
-    // takes redux state as an input and remaps it to props for this component
-    mapStateToProps = (state) => ({
-        SlideshowControlsReducer: state.SlideshowControlsReducer,
-        SlideshowReducer: state.SlideshowReducer,
-        SlideshowSettingsReducer: state.SlideshowSettingsReducer
-    }),
-
-    // takes redux dispatch function as an input and remaps it to props for this component
-    mapDispatchToProps = (dispatch) => ({
-        actions: {
-            onRequestJSON: () => {
-                dispatch(SlideshowActions.requestJSON('src/static/json/slideshow.json'));
-            }
-        }
-    });
-
 // validate that this component is passed the properties it expects
 Slideshow.propTypes = {
     SlideshowControlsReducer: React.PropTypes.shape({
@@ -100,10 +87,12 @@ Slideshow.propTypes = {
         toggled: React.PropTypes.bool,
         transition: React.PropTypes.oneOf(['slide', 'fade']).isRequired
     }).isRequired,
-    actions: React.PropTypes.shape({
-        onRequestJSON: React.PropTypes.func.isRequired
-    }).isRequired
+    onRequestJSON: React.PropTypes.func.isRequired
 };
 
 // EXPORT /////////////////////////////////////////
-export default connect(mapStateToProps, mapDispatchToProps)(Slideshow);
+export default connect((state) => ({
+    SlideshowControlsReducer: state.SlideshowControlsReducer,
+    SlideshowReducer: state.SlideshowReducer,
+    SlideshowSettingsReducer: state.SlideshowSettingsReducer
+}), SlideshowActions)(Slideshow);

src/components/Slideshow/Slideshow.spec.js

@@ -3,7 +3,7 @@ import { Provider } from 'react-redux';
 import { expect } from 'chai';
 import { mount } from 'enzyme';
 import { mockStore } from 'testUtils';
-import { ACTIONS } from 'constants';
+import { ACTIONS, JSON_PATH } from 'constants';
 
 import Slideshow from './Slideshow.jsx';
 
@@ -80,11 +80,11 @@ describe('Slideshow.jsx', () => {
     });
 
     describe('User interactions', () => {
-        it(`Should dispatch ${ACTIONS.SLIDESHOW_JSON_REQUEST} on mount`, (done) => {
+        it(`Should dispatch \`${ACTIONS.SLIDESHOW_JSON_REQUEST}\` on mount`, (done) => {
             const store = mockStore({
                 expectedActions: [
                     {
-                        filePath: 'src/static/json/slideshow.json',
+                        filePath: JSON_PATH,
                         type: ACTIONS.SLIDESHOW_JSON_REQUEST
                     }
                 ],

src/components/Slideshow/SlideshowActions.js

@@ -1,31 +1,24 @@
 import { ACTIONS } from 'constants';
 import { jsonLoader } from 'utils';
 
-const
-    dispatchRequestJSON = (filePath) => ({
-        filePath,
-        type: ACTIONS.SLIDESHOW_JSON_REQUEST
-    }),
-    dispatchReceiveJSON = (parsedJSON) => ({
-        parsedJSON,
-        type: ACTIONS.SLIDESHOW_JSON_RECEIVE
-    }),
-    dispatchErrorJSON = (error) => ({
-        error,
-        type: ACTIONS.SLIDESHOW_JSON_RECEIVE_ERROR
-    }),
-    requestJSON = (filePath) => (dispatch) => {
-        dispatch(dispatchRequestJSON(filePath));
+export default (dispatch) => ({
+    onRequestJSON: (filePath) => {
+        dispatch({
+            filePath,
+            type: ACTIONS.SLIDESHOW_JSON_REQUEST
+        });
         return jsonLoader(filePath).then(
-            (response) => dispatch(dispatchReceiveJSON(response)),
-            (error) => dispatch(dispatchErrorJSON(error))
+            (parsedJSON) => dispatch({
+                parsedJSON,
+                type: ACTIONS.SLIDESHOW_JSON_RECEIVE
+            }),
+            (error) => dispatch({
+                error,
+                type: ACTIONS.SLIDESHOW_JSON_RECEIVE_ERROR
+            })
         );
     },
-    toggleSettings = () => ({
+    onToggleSettings: () => dispatch({
         type: ACTIONS.SLIDESHOW_SETTINGS_TOGGLE
-    });
-
-module.exports = {
-    requestJSON,
-    toggleSettings
-};
+    })
+});

src/components/Slideshow/SlideshowActions.spec.js

@@ -1,6 +1,6 @@
 import { mockStore } from 'testUtils';
 import { ACTIONS } from 'constants';
-import * as SlideshowActions from './SlideshowActions.js';
+import SlideshowActions from './SlideshowActions.js';
 
 describe('SlideshowActions.js', () => {
     let store;
@@ -25,8 +25,8 @@ describe('SlideshowActions.js', () => {
             ]
         });
 
-        return store
-            .dispatch(SlideshowActions.requestJSON(filePath))
+        return SlideshowActions(store.dispatch)
+            .onRequestJSON(filePath)
             .then(store.testExpectedActions);
     });
 
@@ -46,8 +46,8 @@ describe('SlideshowActions.js', () => {
             ]
         });
 
-        return store
-            .dispatch(SlideshowActions.requestJSON(filePath))
+        return SlideshowActions(store.dispatch)
+            .onRequestJSON(filePath)
             .then(store.testExpectedActions);
     });
 
@@ -60,7 +60,7 @@ describe('SlideshowActions.js', () => {
             ]
         });
 
-        store.dispatch(SlideshowActions.toggleSettings());
+        SlideshowActions(store.dispatch).onToggleSettings();
 
         store.testExpectedActions();
 

src/components/SlideshowDot/SlideshowDot.jsx

@@ -13,49 +13,32 @@ import {
 } from 'react-redux';
 
 // actions this view can dispatch
-import * as SlideshowDotActions from './SlideshowDotActions.js';
+import SlideshowDotActions from './SlideshowDotActions.js';
 
 // styles specific to this component
 import styles from './SlideshowDot.css';
 
-const
-
-    // component jsx markup
-    SlideshowDot = ({
-        actions,
-        index,
-        selected
-    }) => (
-        <div
-            className={`${styles.root} ${selected ? styles.selected : ''}`}
-            onClick={
-                selected
-                    ? null
-                    : () => actions.onClick(index)
-            }
-        />
-    ),
-
-    // takes redux state as an input and remaps it to props for this component
-    mapStateToProps = () => ({}),
-
-    // takes redux dispatch function as an input and remaps it to props for this component
-    mapDispatchToProps = (dispatch) => ({
-        actions: {
-            onClick: (index) => {
-                dispatch(SlideshowDotActions.selectDot(index));
-            }
+const SlideshowDot = ({
+    index,
+    onSelectDot,
+    selected
+}) => (
+    <div
+        className={`${styles.root} ${selected ? styles.selected : ''}`}
+        onClick={
+            selected
+                ? null
+                : () => onSelectDot(index)
         }
-    });
+    />
+);
 
 // validate that this component is passed the properties it expects
 SlideshowDot.propTypes = {
-    actions: React.PropTypes.shape({
-        onClick: React.PropTypes.func.isRequired
-    }).isRequired,
     index: React.PropTypes.number.isRequired,
+    onSelectDot: React.PropTypes.func.isRequired,
     selected: React.PropTypes.bool
 };
 
 // export the redux-connected component
-export default connect(mapStateToProps, mapDispatchToProps)(SlideshowDot);
+export default connect(null, SlideshowDotActions)(SlideshowDot);

src/components/SlideshowDot/SlideshowDotActions.js

@@ -1,11 +1,8 @@
 import { ACTIONS } from 'constants';
 
-const
-    selectDot = (slideIndex) => ({
+export default (dispatch) => ({
+    onSelectDot: (slideIndex) => dispatch({
         slideIndex,
         type: ACTIONS.SLIDESHOW_CONTROLS_DOT_SELECT
-    });
-
-module.exports = {
-    selectDot
-};
+    })
+});