useReducer

[00:00:00]
>> I imagine many of you are at least surface level familiar with Redux. If you're not, it's like a centralized store for state in React. A central concept to Redux is the concept of a reducer. A reducer is just a fancy way of saying I have a function, that function takes in a bit of state.

[00:00:22]
It takes an action and it gives you back a new bit of state, that's really it. So we have this function here, let's just make that really small, called a reducer. It takes in some piece of state, our state just looks like if I can find it right here it has an h, it has an s and it has an l, right?

[00:00:49]
That's all it is. It's an object with three properties on it. And then it takes an action and that action is gonna have a type of some variety, right? Is it gonna be INCREMENT_H, DECREMENT_H, INCREMENT_S, DECREMENT_S, INCREMENT_L or DECREMENT_L, right? That's it. Those are the six options for how to modify this particular bit of state.

[00:01:14]
Why are we doing it this way? It seems like some indirection to do it this way. The reason why you can do this is now when you change state, you can test that. So this reducer is now very testable. That has no side effects. All it does is it takes in state and an action and gives you back new state.

[00:01:32]
That is very testable. Most problems in user interfaces come from mismanaged state. And so making your changing state testable is very valuable. So I have this HSL. If you're not familiar with HSL, it's a way of describing color, just like RGB, right? Or lab or any one of those.

[00:01:56]
It's hue, saturation, and lightness, I believe. It's just a way of describing color. And I'm using this to basically kind of cheat a little bit to make it so that if you change the hue or the saturation of something, or the lightness. Generally, you can rotate yourself around the color wheel and the text kind of remains readable as long as you're on the opposite side of the color wheel, right?

[00:02:24]
Not totally true. You'd have to get into lab color space to really guarantee something to be readable. But you can see it's pretty close, right? I'm rotating around the color wheel and it's the text is still remaining fairly readable. Which is I think pretty neat, right? This is not great.

[00:02:42]
This probably doesn't pass double a, right? But yeah, that definitely doesn't. But most of these do, like that does, right? Anyway all this is doing is it's passing in actions, which you can see here I'm doing a dispatch here. And the type is INCREMENT_S or DECREMENT_S. In this function all it does is it's basically the H is just rotating around zero to 360, and then going back around, right?

[00:03:13]
HSL is like a color wheel basically, right? So in other words, you're just imitating Redux behavior, but using just React, using this hook called useReducer. Some people basically say like, I never use useState, I only use useReducer. It's a replacement for useState, right? UseState and useReducer accomplish the same thing, just different ways.

[00:03:40]
I find this a bit heavy handed. I think in this case, it's kind of elegant. So if I'm doing something like this where I have to have some sort of complex interaction between of how my state is changing over time, useReducer is a elegant way to solve that.

[00:03:58]
But if I'm just going from true to false and false to true, I'm just gonna do useState. That seems way easier to me.