Redux and the State ADT
Dispatch a Single State ADT Based Redux Action
So far all of our actions have been implemented as a series of well timed events. We are also capable of not using any of our middleware and just dispatching a normal simple action with no frills or fuss. To complete this game out, we implement the simplest of our action dispatching functions to allow the player to restart the same once it has been concluded.
Instructor: [00:00] Inside of the map dispatch function used by our game component, the only dispatching function left to implement is this restart function. When tracing it through our component tree, starting in our game component, we find that it is passed into the props and then provided to this game over component through the restart game prop.
[00:17] Peering inside of the game over component, we pluck restart game from the props and then use it in the button as the onclick handler to reset the game when it is either won or lost. So we have an inkling of where this button is in the game, we first update our initial timing to make the intervals a bit quicker to resolve.
[00:35] Then slide on over to our UI, and run through the process of winning the game by selecting the first four hints correctly, making our spiteful little bunny more angry with each correct answer until we're finally presented with this happy little modal informing us that we've won the game.
[00:52] More importantly, housing the button that we're currently targeting, which we want to reset the game when clicked. To have this function restart the game, all we really need to do is dispatch this reset game action in our game reducer file that will replace the game state with the initial state.
[01:08] Near the tippity top of our game component file, we just pluck the action creator off of the game reducer for use downstairs in our restart function, which will be a function from unit that just dispatches the action resulting from calling reset game.
[01:23] With no need for this unit function anymore, we just remove the import to satisfy our linter, then slide back over to our finished game to have a play with our hard work, first running through a round by once again answering the first four hints correctly, shattering our bunny's preconceived notions of our ability with each answer until we're presented once again with our game over modal.
[01:46] This time with a working end game button that now resets the game with a quick click, allowing us to play again. This time we'll send our bunny on an emotional roller coaster, getting some wrong and others right.
[01:57] Notice how every incorrect hint changes the bunny to a more cheery disposition, making it more difficult to win the game as the number of moves left dwindle, eventually making it impossible to make the bunny full-on angry, and thus losing the game.
Wonderful job. Congratulations