Map Dispatch to Props

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

@@ -3,14 +3,6 @@ import { connect } from 'react-redux';
 import { startGame, cancelGame } from '../actions/settings';
 
 class App extends Component {
-  startGame = () => {
-    this.props.dispatch(startGame())
-  }
-
-  cancelGame = () => {
-    this.props.dispatch(cancelGame())
-  }
-
   render() {
     console.log('this', this);
 
@@ -22,13 +14,13 @@ class App extends Component {
             <div>
               <h3>The game is on!</h3>
               <br />
-              <button onClick={this.cancelGame}>Cancel Game</button>
+              <button onClick={this.props.cancelGame}>Cancel Game</button>
             </div>
           ) : (
             <div>
               <h3>A new game awaits</h3>
               <br />
-              <button onClick={this.startGame}>Start Game</button>
+              <button onClick={this.props.startGame}>Start Game</button>
             </div>
           )
         }
@@ -43,6 +35,13 @@ const mapStateToProps = state => {
   return { gameStarted: state.gameStarted };
 }
 
-const componentConnector = connect(mapStateToProps);
+const mapDispatchToProps = dispatch => {
+  return {
+    startGame: () => dispatch(startGame()),
+    cancelGame: () => dispatch(cancelGame()),
+  };
+}
+
+const componentConnector = connect(mapStateToProps, mapDispatchToProps);
 
 export default componentConnector(App);