Challenge and Code: Guess Redux Logic and Component

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

@@ -0,0 +1,9 @@
+import { SET_GUESS } from './types';
+
+export const setGuessEven = () => {
+  return { type: SET_GUESS, guess: 'even' };
+}
+
+export const setGuessOdd = () => {
+  return { type: SET_GUESS, guess: 'odd' };
+}

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

@@ -1,5 +1,6 @@
 export const SET_GAME_STARTED = 'SET_GAME_STARTED';
 export const SET_INSTRUCTIONS_EXPANDED = 'SET_INSTRUCTIONS_EXPANDED';
+export const SET_GUESS = 'SET_GUESS';
 
 export const DECK = {
   FETCH_SUCCESS: 'DECK_FETCH_SUCCESS',

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

@@ -6,6 +6,7 @@ import fetchStates from '../reducers/fetchStates';
 import Instructions from './Instructions';
 import DrawCard from './DrawCard';
 import Card from './Card';
+import Guess from './Guess';
 
 class App extends Component {
   startGame = () => {
@@ -33,6 +34,8 @@ class App extends Component {
             <div>
               <h3>The game is on!</h3>
               <br />
+              <Guess />
+              <br />
               <DrawCard />
               <hr />
               <Card />

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { setGuessEven, setGuessOdd } from '../actions/guess';
+
+const Guess = ({ guess, setGuessEven, setGuessOdd}) => {
+  return (
+    <div>
+      <h3>Will it be even or odd?</h3>
+      <div>
+        <button
+          onClick={setGuessEven}
+          style={guess === 'even' ? { border: '2px solid #43a047' } : null}
+        >Even</button>
+        {' '}
+        <button
+          onClick={setGuessOdd}
+          style={guess === 'odd' ? { border: '2px solid #43a047' } : null}
+        >Odd</button>
+      </div>
+    </div>
+  )
+}
+
+export default connect(
+  ({ gameState: { guess }}) => ({ guess }),
+  { setGuessEven, setGuessOdd }
+)(Guess);

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

@@ -0,0 +1,16 @@
+import { SET_GUESS, SET_GAME_STARTED } from '../actions/types';
+
+const DEFAULT_GAME_STATE = { guess: '' };
+
+const gameStateReducer = (state = DEFAULT_GAME_STATE, action) => {
+  switch(action.type) {
+    case SET_GUESS:
+      return { ...state, guess: action.guess };
+    case SET_GAME_STARTED:
+      return DEFAULT_GAME_STATE;
+    default:
+      return state;
+  }
+}
+
+export default gameStateReducer;

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

@@ -1,7 +1,9 @@
 import settingsReducer from './settings';
 import deckReducer from './deck';
+import gameStateReducer from './gameState';
 
 export default {
   deck: deckReducer,
-  settings: settingsReducer
+  settings: settingsReducer,
+  gameState: gameStateReducer
 };