[React + Functional Programming ADT] Connect State ADT Based Redux Actions to a React Application

With our Redux implementation lousy with State ADT based reducers, it is time to hook it all up to a React Shell. Having already built out some UI/UX in React that is connected to our store, we’ll spend the first part of this lesson with a quick tour of how our store integrates using the standard react-redux library.

Once we get a handle on our state's propagation through the app, we can focus in on how we will dispatch our actions during game play. We’ll implement the ability to start the game by using the startGame action creator to create a dispatching function that is passed through our component tree, down to the Start Game button in our Playing Area.

 

Add redux dev tool to the appliation:

import { createStore, compose } from 'redux'

import identity from 'crocks/combinators/identity'

import { initialState } from './model/initialize'

import reducer from './reducers'

const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

export default createStore(
  reducer,
  initialState(),
  composeEnhancers(identity) // add devtool
)

 

Provide Store for React application:

index.js:

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'

import './index.css'

import store from './data/store'
import Game from './Game'

ReactDOM.render(
  <Provider store={store}>
    <Game />
  </Provider>,
  document.getElementById('root')
)

 

Dispatch action from component:

import React from "react";
import PropTypes from "prop-types";

import pick from "crocks/helpers/pick";
import unit from "crocks/helpers/unit";

import { connect } from "react-redux";
import { startGame } from "./data/reducers/game";

import "./Game.css";

import Bunny from "./components/Bunny";
import Feedback from "./components/Feedback";
import Messages from "./components/Messages";
import PlayArea from "./components/PlayArea";
import GameOver from "./components/GameOver";

const Game = props => {
  const {
    answer,
    cards,
    hasWon,
    hint,
    isCorrect,
    moves,
    start, // passed in from here
    rank,
    restart
  } = props;

  return (
    <div className="game">
      <Bunny rank={rank} />
      <PlayArea answer={answer} cards={cards} startGame={start} /> <!-- Used here -->
      <Messages hint={hint} moves={moves} />
      <Feedback isCorrect={isCorrect} />
      <GameOver hasWon={hasWon} restartGame={restart} />
    </div>
  );
};

Game.propTypes = {
  answer: PropTypes.func.isRequired,
  cards: PropTypes.array.isRequired,
  isCorrect: PropTypes.bool,
  hasWon: PropTypes.bool,
  hint: PropTypes.object.isRequired,
  moves: PropTypes.number.isRequired,
  start: PropTypes.func.isRequired,
  rank: PropTypes.number.isRequired,
  restart: PropTypes.func.isRequired
};

const mapState = pick([
  "cards",
  "hasWon",
  "hint",
  "isCorrect",
  "moves",
  "rank"
]);

const mapDispatch = dispatch => ({
  answer: unit,
  restart: unit,
  start: () => dispatch(startGame()) // Connect to our State ADT
});

export default connect(
  mapState,
  mapDispatch
)(Game);