[Functional Programming ADT] Create a Redux Store for Use with a State ADT Based Reducer

With a well defined demarcation point between Redux and our State ADT based model, hooking up to a Redux store is no different than any other Redux based implementation. Once we have all of our transitions represented in dispatchable actions, we can step though a typical game flow and see our hard work pay off.

 

We will see how to interget redux with our State:

 

/store.js

// redux store
import { createStore } from "redux";
import { initialState } from "./model/initialize";
import reducer from "./reducers";

export default createStore(reducer, initialState());

 

index.js

import log from "./logger";

import { startGame, hideAllCards } from "./data/reducers/game";

import { selectCard, showFeedback } from "./data/reducers/turn";

import store from "./data/store";

const { dispatch, getState } = store;

log(getState());

/**
{ colors: [ 'orange', 'green', 'blue', 'yellow' ], shapes: [ 'triangle', 'circle', 'square' ], cards: [ ], hint: { }, isCorrect: null, left: 8, moves: 0, rank: 4, seed: 1549885157384 }
*/

It return our initial state.

 

If we want to dipatch action, we can do:

dispatch(startGame());
/**
 * { colors: [ 'orange', 'green', 'blue', 'yellow' ], shapes: [ 'triangle', 'circle', 'square' ], cards: [ { id: 'green-square', color: 'green', shape: 'square', selected: true }, { id: 'yellow-circle', color: 'yellow', shape: 'circle', selected: true }, { id: 'green-circle', color: 'green', shape: 'circle', selected: true }, { id: 'yellow-square', color: 'yellow', shape: 'square', selected: true }, { id: 'blue-circle', color: 'blue', shape: 'circle', selected: true }, { id: 'green-triangle', color: 'green', shape: 'triangle', selected: true }, { id: 'orange-square', color: 'orange', shape: 'square', selected: true }, { id: 'yellow-triangle', color: 'yellow', shape: 'triangle', selected: true }, { id: 'orange-triangle', color: 'orange', shape: 'triangle', selected: true } ], hint: { }, isCorrect: null, left: 8, moves: 0, rank: 4, seed: 270041088 }
 */