Use ReasonMLs Variant & Record types with ReasonReact's useReducer hook to Manage State
Any React developer will agree that 2019 was the year of that hooks took the library by storm. Luckily for us, the ReasonRect library makes it possible to hooks within the context of a ReasonML application.
In this lesson we will take a test drive of the useReducer hook within a ReasonML application. By the end, we'll have learned how to define our actions using variants, use records to shape our state, and more!
Resources
- [ReasonReact Docs] (https://reasonml.github.io/reason-react/en/)
- ReasonReact Blog - Support for hooks in 0.7.0 Release
Instructor: [00:04] OK, so tap our page. We're just going to create a state type, and this is going to hold the properties of our state. We're declaring count to be an integer, and then increment(value) is also going to be an integer. Once I have that, make sure I get the semicolon there.
[00:31] Now, the next thing I'll do is create an action type, which, as you might assume, is going to hold the actions that our reducer is going to respond to. We'll have click here, and then our second one will be update increment(value) and then lastly just add increment(value).
[01:07] Now that we have our state record and action variant lined up, we're going to initiate our state in dispatch inside of this tuple, and we're going to set it equal to useReducer.
[01:29] UseReducer is going to take a reducer function, and just like any reducer, we're going to pass in state and then action. From that, we'll return a switch statement that responds to the actions defined above in our variant.
[01:59] The second argument to useReducer is the initial state. We're just going to set that to 0for count and increment(value) will also be zero.
[02:12] Inside of our switch statement, we're going to handle all these cases. For click, we just want to return the state and then we want our count property to be incremented by one.
[02:28] I almost see that we haven't covered all of our variant cases, so we better get to that.
[02:37] Here again, update increment(value), passing the state again using the spread operator. Then doing the same thing as count and just adding one to its value.
[02:57] Add increment(value) is going to wrap this up. From this, we're just going to set the count equal to the current count plus the current increment(value) within our state, and we'll finish it off by just resetting increment(value) back down to zero.
[03:25] Now that our logic's all good, I'm going to first remove this hard-coded value and passing state.count.
[03:40] Then the next thing we'll do is just display the increment(value) inside of that button. If we refresh, we see that we have a zero, which is correct since we're on our default state.
[03:56] The last thing we need to do is add some onclick props to our buttons, and since we won't be using the argument onclick, we're going to use an underscore. We're just going to return our dispatch function with the name of each variant constructor that we want to fire off.
[04:19] So first, we use click. Then next, we're going to pass an update increment(value), and then the last one would do is just add increment(value).
[04:41] Now, everything's looking pretty good. If we refresh, let's test it out. Here our clicker is working as expected, let's hammer that increment(value). If my math is correct, everything is working fine.