Connect State ADT Based Redux Actions to a React Application

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.