Merge pull request codeBelt#10 from codeBelt/js/base-reducer

Add BaseReducer

Author: codeBelt

src/stores/rootReducer.js

@@ -9,7 +9,7 @@ export default (history) => {
     error: ErrorReducer.reducer,
     requesting: RequestingReducer.reducer,
     router: connectRouter(history),
-    shows: ShowsReducer.reducer,
+    shows: new ShowsReducer().reducer,
   };
 
   return combineReducers(reducerMap);

src/stores/shows/ShowsReducer.js

@@ -1,36 +1,32 @@
 import ShowsAction from './ShowsAction';
+import BaseReducer from '../../utilities/BaseReducer';
 
-export default class ShowsReducer {
-  static initialState = {
+export default class ShowsReducer extends BaseReducer {
+  initialState = {
     currentShowId: '74',
     show: null,
     episodes: [],
     actors: [],
   };
 
-  static reducer(state = ShowsReducer.initialState, action) {
-    if (action.error) {
-      return state;
-    }
+  [ShowsAction.REQUEST_SHOW_FINISHED](state, action) {
+    return {
+      ...state,
+      show: action.payload,
+    };
+  }
+
+  [ShowsAction.REQUEST_EPISODES_FINISHED](state, action) {
+    return {
+      ...state,
+      episodes: action.payload,
+    };
+  }
 
-    switch (action.type) {
-      case ShowsAction.REQUEST_SHOW_FINISHED:
-        return {
-          ...state,
-          show: action.payload,
-        };
-      case ShowsAction.REQUEST_EPISODES_FINISHED:
-        return {
-          ...state,
-          episodes: action.payload,
-        };
-      case ShowsAction.REQUEST_CAST_FINISHED:
-        return {
-          ...state,
-          actors: action.payload,
-        };
-      default:
-        return state;
-    }
+  [ShowsAction.REQUEST_CAST_FINISHED](state, action) {
+    return {
+      ...state,
+      actors: action.payload,
+    };
   }
 }

src/utilities/BaseReducer.js

@@ -0,0 +1,13 @@
+export default class BaseReducer {
+  initialState = {};
+
+  reducer = (state = this.initialState, action) => {
+    const handler = this[action.type];
+
+    if (!handler || action.error) {
+      return state;
+    }
+
+    return handler(state, action);
+  };
+}

src/views/App.jsx

@@ -3,6 +3,7 @@ import { ConnectedRouter } from 'connected-react-router';
 import { Route, Switch } from 'react-router-dom';
 import RouteEnum from '../constants/RouteEnum';
 import MainNav from './components/main-nav/MainNav';
+import LoadingIndicator from './components/loading-indicator/LoadingIndicator';
 
 const HomePage = lazy(() => import('./home-page/HomePage'));
 const NotFoundPage = lazy(() => import('./not-found-page/NotFoundPage'));
@@ -12,7 +13,7 @@ export default class App extends React.Component {
   render() {
     return (
       <ConnectedRouter history={this.props.history}>
-        <Suspense fallback={<div>Loading...</div>}>
+        <Suspense fallback={<LoadingIndicator isActive={true} />}>
           <MainNav />
           <Switch>
             <Route exact={true} path={RouteEnum.Home} component={HomePage} />