Split Redux Layers

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

@@ -0,0 +1,29 @@
+import { SET_GAME_STARTED, SET_INSTRUCTIONS_EXPANDED } from './types';
+
+export const startGame = () => {
+  return {
+    type: SET_GAME_STARTED,
+    gameStarted: true
+  };
+}
+
+export const cancelGame = () => {
+  return {
+    type: SET_GAME_STARTED,
+    gameStarted: false
+  };
+}
+
+export const expandInstructions = () => {
+  return {
+    type: SET_INSTRUCTIONS_EXPANDED,
+    instructionsExpanded: true
+  };
+}
+
+export const collapseInstructions = () => {
+  return {
+    type: SET_INSTRUCTIONS_EXPANDED,
+    instructionsExpanded: false
+  };
+}

evens-or-odds/src/actions/types.js

@@ -0,0 +1,2 @@
+export const SET_GAME_STARTED = 'SET_GAME_STARTED';
+export const SET_INSTRUCTIONS_EXPANDED = 'SET_INSTRUCTIONS_EXPANDED';

evens-or-odds/src/index.js

@@ -1,76 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { configureStore } from '@reduxjs/toolkit';
+import rootReducer from './reducers';
 import App from './components/App';
 import './index.css';
 
-const DEFAULT_SETTINGS = {
-  gameStarted: false,
-  instructionsExpanded: false
-};
-
-const SET_GAME_STARTED = 'SET_GAME_STARTED';
-const SET_INSTRUCTIONS_EXPANDED = 'SET_INSTRUCTIONS_EXPANDED';
-
-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
-      };
-    default:
-      return state;
-  }
-};
-
 const store = configureStore({
   reducer: rootReducer
 });
-console.log('store', store);
 store.subscribe(() => {
   console.log('store.getState()', store.getState());
 });
 
-const startGame = () => {
-  return {
-    type: SET_GAME_STARTED,
-    gameStarted: true
-  };
-}
-
-const cancelGame = () => {
-  return {
-    type: SET_GAME_STARTED,
-    gameStarted: false
-  };
-}
-
-const expandInstructions = () => {
-  return {
-    type: SET_INSTRUCTIONS_EXPANDED,
-    instructionsExpanded: true
-  };
-}
-
-const collapseInstructions = () => {
-  return {
-    type: SET_INSTRUCTIONS_EXPANDED,
-    instructionsExpanded: false
-  };
-}
-
-store.dispatch(startGame());
-store.dispatch(cancelGame());
-store.dispatch(expandInstructions());
-store.dispatch(collapseInstructions());
-
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(<App />);

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

@@ -0,0 +1,27 @@
+import { SET_GAME_STARTED, SET_INSTRUCTIONS_EXPANDED } from '../actions/types';
+
+const DEFAULT_SETTINGS = {
+  gameStarted: false,
+  instructionsExpanded: false
+};
+
+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
+      };
+    default:
+      return state;
+  }
+};
+
+export default rootReducer;