Redux and the State ADT
Dispatch Multiple Asynchronous Redux Actions with Arguments
There are times when we need to provide input to our action dispatching functions that we use as handlers. A great use case in our game is when the player selects one of the cards as their answer. We need to communicate which card was selected so our state can transition properly.
To complicate the matter, when a player provides their answer, we want to fire a series of well times actions, with some of them needing this input. We have set up a nice pattern that will allow us to apply any arguments to any action created needed in a series of actions in an easy to follow manner.
Instructor: [00:00] In our game component, we have this map dispatch function that provides the functions needed by our game to dispatch actions, like this answer function used to handle when a player selects a card. We can trace it down to its leaf by following it to the play area component, passed in on the answer prop.
[00:17] Inside of the play area component, we use this build card function to generate each card in our collection, providing answer as the first argument. We then use this answer function to marry the card ID to the action, providing it as the answer prop to the card component. In card, we've reached our final destination, with answer being assigned to the front side of the card's onclick handler.
[00:39] To get a handle on where this handler is being used, we'll speed up the process a bit by changing our interval from five seconds to a New York second. Then in the front end, we'll click start game to find this is the handler that we're writing for.
[00:54] Back in our game component, we want to replace this answer function with a series of staged dispatched actions, starting with the select card action creator from our turn reducer. Let's pull it into our game container by ever so gently plucking it from our turn reducer like a ripe peach.
[01:10] Then in the down below, we'll gracefully wander up to our answer function, replacing the unit function with a function that takes in an ID and uses it to dispatch a select card action for the card. Now, when we click the start game button and are presented with nine options to choose from, we can select a single card by clicking it, seeing the action over in our Redux dev tools.
[01:32] To show the player some feedback, we'll also dispatch the show feedback action with the selected ID by instead dispatching a series of actions, kicking it off with select card as the first action in the sequence.
[01:45] In order to give the card time to flip, we'll use a crocks Async instance, using the resolve after function to construct the instance, waiting an eternal half second before firing off the show feedback action, which we'll need to import into our game component file before saving.
[02:00] After saving down our game component file, we can then jump back over to our game and click the start game button once again. Then select the proper card to not only see our bunny updated, but this feedback text displayed saying that we chose well.
[02:14] Now, we need to reset the turn by dispatching the start turn action once again a second and a half later, clearing the feedback text, and randomly selecting the next hint for the player to find, giving the player enough time to process the feedback.
[02:28] With that, we now have the concept of a turn in place tied to a single event handler, as we see by selecting a super correct blue square to get the bunny all meh.
[02:38] With the red triangle coming up as our next hint, we can make the bunny happy again by selecting this incorrect green square. We can go back to meh with the correct blue triangle. Finally, a bit perturbed with another correct selection of yellow triangle.