Redux and the State ADT
Transition a Stateful ADT with Outside Input
Without any input from the outside world to drive it, a state machine can be a very boring affair. It becomes even more boring, if we were to create a game that took no input from the outside. By using actions, Redux provides a means to allow the outside world influence and drive the application state based on some payload. In order to demonstrate how we can provide input to our transitions, we will create another transaction that takes an id and transitions the state based on that input.
Instructor: [00:00] We start with this initial state that has a cards attribute which is an array of card objects. We want to create a function that takes a string ID and adds a truthy selected attribute to any card that matches the provided ID.
[00:13] To accomplish this, we'll use this predefined function in our answer model called markSelected. It takes a string, then an object, returning an object. We take in a string ID and use a helper function to do the heavy lifting for us.
[00:27] AssignedBy is a function that takes a predicate function and an object. Then it returns a function that expects an object and returns an object. Its implementation takes in a predicate pred and an object to assign named obj, returning a function that takes an object and if it passes the predicate, will do an Object.assign with the provided object.
[00:49] For our predicate function, we use propEqual. It reports true when the ID of the object matches the ID we pass in. When true, it returns a new copy of the card with selected added to it.
[01:02] Now let's exploit this delicious, pre-baked goodness to build a staple transaction. We'll export a new function named selectCard to capture our card selection transaction.
[01:13] We define selectCard as a function that takes a string and returns a state, app state of unit. To implement, we create a function that takes in a string ID that will run a transaction over the array in our cards attribute.
[01:28] This allows us to map our markSelected function that we preload with the target ID to the array of card, merging the old value with the result. To see this little number in action, we pop back to our index file and import selectCard from our answer model.
[01:44] We just pull off selectCard from our import at data, model, answer. After a save to verify our pathing, we mosey on down to our log function and place a call to selectCard, passing it an ID of green-square. We then run execWith on the resulting state instance to get our updated state by applying our initial state.
[02:08] With another save, we see that the first card in cards has been selected. If we were to replace a valid ID with some silly thing, like a purple strawberry we find -- as we would expect -- nothing to be selected.
[02:22] To get a feel for how we would use this with our beloved chain, we can lift our ID into a state instance with of, placing it in the resultant. We can verify this by calling evalWith to peek at the resultant, which is green-square.
[02:37] We'll switch back to execWith to peer into the resulting state after we chained in our selectCard to accept the ID from the resultant, selecting the first card in cards. We can also select the valid blue triangle at the end of the list, but as we see here, a silly purple star selects nothing.