Redux and the State 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.
Instructor: [00:00] To integrate our Redux implementation with the React application, we first export our Redux store from our store file by calling create store with our main reducer exported from Reducer's index file, which integrates our state ADT model with Redux.
[00:14] We also provide our initial state to the store with the result of calling this initial state function that provides all the state we need for our state transitions.
[00:23] Finally, we provide the result of this compose enhancers function loaded with the crux identity combinator for now, which we'll pull from either the Redux DevTools or fallback to the compose provided by Redux, giving us a function that Redux will use to run our middleware through.
[00:39] With the game running, we can check the state tab in the Redux DevTools to find our initial state loaded and ready to be used by the game. While it may not win any awards at the mo, at least we have a starting point to dispatch our state transitions.
[00:52] Let's take a quick tour to see how our exported store is connected to the game. We find our store being imported into our main React index file and connected with the provider component from React Redux.
[01:04] We also import our game container component, which is the root for the provider, and digging a little dipper into the game component, we find the start function provided to us on the component's props, which is used as the handler for when the start game button is clicked inside of our play area.
[01:22] As we see here with start being passed is the start game prop for play area. Following the bread crumbs into our play area component, we see that the start game prop is then passed along as the start prop in the start component.
[01:35] Drilling down just a wee bit further into the start component, we see that the start prop makes it all the way down and ends as the on-click handler for the start button, which is the button that we find here on our interface, which at present does nothing.
[01:49] Let's rectify that. We'll use our start game action creator to generate our cards and mark them as selected. Over in our game component, we provide the connect function, this mapped dispatch function to get our dispatching functions into the container, which at present are all [inaudible] with this crux unit function that always does nothing and returns undefined.
[02:09] Let's get our start function to do a thing. We first pull in our start game action creator, which we'll use to dispatch the state transitions needed to generate our player's nine cards, plucking it off of our game reducer.
[02:21] Now we need to change up start to dispatch our action. First, we need to grab dispatch off of the input to map dispatch, which is provided to us by React Redux. With dispatch in scope, we create a function that takes nothing in and uses dispatch to dispatch the action returned from calling our action creator.
[02:40] Now, when we click our button, we'll populate this empty array with the list of nine random cards ready to be memorized by player after a click, and there they are some handsome cards with shapes built out in React from this cards array managed by Redux.