Redux and the State ADT
Extend State ADT Based Transitions after React/Redux Integration
Once we have our model fully integrated with a dispatching state management system like Redux and a front-end implementation in something like React, there will come a time when we will need to either add to or extend our model in some way.
By building out our model first and keeping all of our game logic concerns isolated to our pure state transitions, it is easy to alter. Usually it is just a matter of capturing our modifications in a single function and then locating the point in our existing model where we need our change applied. Then we just plop in our function, and as long as our function is pure, most of the time it will just work.
Instructor: [00:00] To determine if a player has won the game, we start in our end model file with this set has won transition that uses the over function to set the has one attribute on our state to either a Boolean or a null value.
[00:12] In order to make this determination, we'll need to pull the left attribute from our state using this get left transition that uses get state to get the moves a player has left. We also need to pull the current rank value from state as well, which we do with get rank that also uses get state to pull the value.
[00:29] With these two values, we can create this determine function that takes an integer to a function that takes an integer to either a Boolean or null. We implement determine as a binary curried function that takes the moves left followed by the current rank. Then we check if the rank is greater than zero.
[00:47] In the event that it is, we also check if the rank ever slips above the moves a player has left, which means they have lost and false is returned. Otherwise, we kick back a null. However, when rank is zero, true is returned and the game is won.
[01:01] We can now implement this check one state transition to pull the values we need from state by using the crocks converge combinator with lift A2 loaded up with determine, grabbing the values from state using their associated transactions, giving us a new state instance with the resultant holding the outcome.
[01:19] Finally, we tie it all together with this end game Kleisli arrow from unit, which we implement using compose K with set has one after check one. This composition will set the has one attribute in state based on the result of check one.
[01:33] To put this little number to good use, we'll export it as the default for this module, and then pop over to our turn module so we can add it as part of the main turn transaction.
[01:43] Popping to the top of this turn module, we'll pull it in, giving it the name of end game from the end file located in the same model folder. Now we just need to perform our check at the top of every turn by adding it to the head of our turn composition, and we're done.
[01:59] Let's see what we just implemented by starting up a new game and experiencing what losing feels like by getting a whole mess of them wrong. Although we start off strong by selecting this correct blue square, it just goes downhill from there.
[02:11] As our move counter increases, we see the bunny super happy with each incorrect answer, until we get to the point that we're presented with this modal, informing us that we have lost the game. Currently, this button does nothing, so we do a manual refresh to run through again and see what being a winner feels like.
[02:30] This time, we bring our A game and pick each hint correctly, watching that wee little bunny become consumed with anger with each correct answer until the breaking point is reached and we're presented with the modal to confirm the fact that we did anger the bunny.