⚠️ This lesson is retired and might contain outdated information.

Use ReasonMLs Variant & Record types with ReasonReact's useReducer hook to Manage State

Thomas Greco
InstructorThomas Greco
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 2 years ago

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

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.

egghead
egghead
~ 24 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today