Create State ADT Based Reducers

Instructor: [00:00] In our index file we have the select card action creator as well as our main Redux reducer, both imported from our reducers folder. We've also defined some state that contains a short list of cards and a couple of integers for tracking the moves a player has left and the moves a player has already made.

[00:17] We called the reducer, providing it both the state and the result of calling select card with the ID of the card selected. Our reducer takes both some app state and an action right back to app state. It takes in our previous state and the current action and applies our action to this turn reducer.

[00:34] The turn reducer takes an action of A to either a state instance or a null value and uses the switch case to determine which transition to apply our payload to.

[00:44] As we've already seen select card, let's take a look at the show feedback action creator. We'll just pop back over to our index, replacing select card with show feedback and see that it compares the selected card from this list to the current hint.

[00:57] Updating is correct and rank accordingly. If we pass in an unknown action like this silly verb, we get our previous state echoed back to us with no modification.

[01:08] Let's look at a couple refactors we can do to clean up some of this boilerplate. Because we're switching over a string value, we can use a plain old JavaScript object to capture this pattern. We'll define a new action reducer object with our action names as keys paired with their associated state transitions, creating entries for both select card and show feedback.

[01:29] Let's comment out the old verbose implementation for reference and clean up our arrow function to return the result of an expression that uses the type to select our transition from action reducer, thus creating a compact implementation for both of these cases.

[01:45] Once we account for this null, we'll have the entire block implemented. If our action isn't present on the object, we'll return a no op by defaulting to the prototype for a JavaScript function to guarantee that this expression will always return a function ready to accept our payload.

[02:01] We've now implemented this entire block in just a single line, defining how to select and call a given action. Not only does this work with valid actions, but it also still works for invalid ones.

[02:12] We've cleaned this up considerably, but there are still a few things we can do to make this pattern more reusable. Let's focus on our state reducer saying we now get back a state instance when called with a valid action.

[02:24] This express defines a disjunction, making it easily representable with the maybe data type. Let's pop over to our helpers file and capture this in a function that we'll export, giving it the name of create reducer, taking in an action reducer as its first argument.

[02:38] We'll define this new helper function as a function that will take this action reducer type, which is defined as an object of functions that take any type A to a state app state of unit.

[02:50] When given an action reducer, create reducer will give back what we define as a reducer, which in our case is a function taking any action of type A to a maybe of state app state of unit.

[03:02] To satisfy this reducer type, we'll need to return an action accepting function, plucking both type and payload off of a given action. For the first portion of our disjunction, we'd like to use a maybe to return our state transition if present.

[03:15] Otherwise we'd like it to give back a nothing. It just so happens we can accomplish this with a crocks prop function, which will take our type as the key to look up on our action reducer.

[03:25] To see what we've got so far, we'll jump into our turn reducer and import it in from our helpers file and then take a mighty leap downstairs to comment out our first attempt. Replacing reducer with the result of create reducer with our previously defined action reducer, which we see gives back a function wrapped in a just.

[03:45] Specifically this feedback function, which is patiently waiting to be fed the payload from our action like we had before.

[03:52] Back in our helpers file we'll map the crocks apply to combiner to apply the payload to the underlying function, placing our state instance in the maybe. Believe it or not, we're actually done, so we'll remove our old crusty reducer and add a siggy for our new hotness, which is just our reducer type.

[04:10] Now if we provide an action not covered by the reducer, we'll get back a nothing. Otherwise we'll get back our just with our new state transition. We're not quite finished. Over in our main reducer, we're not set up to deal with the maybe return by our turn reducer, so let's change focus to our main reducer and get it to work with this brand new maybe type.

[04:30] We'll provide the state to the first argument and swap out our reducer, so we're not implementing this blind. We'll clean up our arrow function, then comment out the old school and return the result of calling turn with the action.

[04:42] Next up, we need to handle this check to see if we have a state instance in our result, which we'll do by chaining in the crock safe function, passing in a predicate that checks if a given value is a state instance, taking care of the first part of our old implementation.

[04:58] If we have a state instance, we need to call this exec with function, passing in our state, which we'll do by mapping to this point free version provided by crocks to find our transition state wrapped in a maybe.

[05:09] Now if we swap out select card and reduce with our silly verb action, we see we get back a nothing, signaling that we need to echo back our previous state, which we do by using it to option our maybe to get our expected results. Using option also unwraps our valid actions as we see with select card and also with the valid show feedback.