Split Up and Combine Reducers

evens-or-odds/src/components/App.js

@@ -51,7 +51,10 @@ class App extends Component {
 const mapStateToProps = state => {
   console.log('state', state);
 
-  const { gameStarted, fetchState, message } = state;
+  const {
+    settings: { fetchState, message },
+    deck: { gameStarted }
+  } = state;
 
   return { gameStarted, fetchState, message };
 }

evens-or-odds/src/components/Instructions.js

@@ -29,6 +29,6 @@ const Instructions = props => {
 }
 
 export default connect(
-  state => ({ instructionsExpanded: state.instructionsExpanded }),
+  state => ({ instructionsExpanded: state.settings.instructionsExpanded }),
   { expandInstructions, collapseInstructions }
 )(Instructions);

evens-or-odds/src/reducers/deck.js

@@ -0,0 +1,26 @@
+import { DECK } from '../actions/types';
+import fetchStates from './fetchStates';
+
+const DEFAULT_DECK = {
+  deck_id: '',
+  remaining: 0,
+  fetchState: '',
+  message: ''
+};
+
+const deckReducer = (state = DEFAULT_DECK, action) => {
+  console.log('state', state, 'action', action);
+
+  switch(action.type) {
+    case DECK.FETCH_SUCCESS:
+      const { remaining, deck_id } = action;
+
+      return { ...state, remaining, deck_id, fetchState: fetchStates.success };
+    case DECK.FETCH_ERROR:
+      return { ...state, message: action.message, fetchState: fetchStates.error };
+    default:
+      return state;
+  }
+};
+
+export default deckReducer;

evens-or-odds/src/reducers/index.js

@@ -1,38 +1,7 @@
-import {
-  SET_GAME_STARTED,
-  SET_INSTRUCTIONS_EXPANDED,
-  DECK
-} from '../actions/types';
-import fetchStates from './fetchStates';
+import settingsReducer from './settings';
+import deckReducer from './deck';
 
-const DEFAULT_SETTINGS = {
-  gameStarted: false,
-  instructionsExpanded: false
+export default {
+  deck: deckReducer,
+  settings: settingsReducer
 };
-
-const rootReducer = (state = DEFAULT_SETTINGS, action) => {
-  console.log('state', state, 'action', action);
-
-  switch(action.type) {
-    case SET_GAME_STARTED:
-      return {
-        ...state,
-        gameStarted: action.gameStarted
-      };
-    case SET_INSTRUCTIONS_EXPANDED:
-      return {
-        ...state,
-        instructionsExpanded: action.instructionsExpanded
-      };
-    case DECK.FETCH_SUCCESS:
-      const { remaining, deck_id } = action;
-
-      return { ...state, remaining, deck_id, fetchState: fetchStates.success };
-    case DECK.FETCH_ERROR:
-      return { ...state, message: action.message, fetchState: fetchStates.error };
-    default:
-      return state;
-  }
-};
-
-export default rootReducer;

evens-or-odds/src/reducers/settings.js

@@ -0,0 +1,31 @@
+import {
+  SET_GAME_STARTED,
+  SET_INSTRUCTIONS_EXPANDED
+} from '../actions/types';
+import fetchStates from './fetchStates';
+
+const DEFAULT_SETTINGS = {
+  gameStarted: false,
+  instructionsExpanded: false
+};
+
+const settingsReducer = (state = DEFAULT_SETTINGS, action) => {
+  console.log('state', state, 'action', action);
+
+  switch(action.type) {
+    case SET_GAME_STARTED:
+      return {
+        ...state,
+        gameStarted: action.gameStarted
+      };
+    case SET_INSTRUCTIONS_EXPANDED:
+      return {
+        ...state,
+        instructionsExpanded: action.instructionsExpanded
+      };
+    default:
+      return state;
+  }
+};
+
+export default settingsReducer;