Intermediate React Intermediate React

Q&A and Other State Management Tools

Check out a free preview of the full Intermediate React course:
The "Q&A and Other State Management Tools" Lesson is part of the full, Intermediate React course featured in this preview video. Here's what you'd learn in this lesson:

Brian answers a question about action constants, if context can get the same debugging in Redux and discusses other state management tools like MobX. - https://frontendmasters.com/courses/react-state/

Get Unlimited Access Now

Transcript from the "Q&A and Other State Management Tools" Lesson

[00:00:01]
>> Speaker 1: What about using a global actions.js file and using constants instead.
>> Brian Holt: Yeah, so last time I taught this course, I did exactly that. If you go in to here, the previous version of this, you can see here that I have actions.js where I just export the actual name of these various actions that I want to do.

[00:00:22] So rather than setting the actual string literal in both places, I used the variable name. This kind of prevents a little bit like fat fingering this, because if you mess up this string it's really hard to tell that you messed up the string. So some people insist that's the best idea.

[00:00:41] I'm torn about it. Honestly, something that I'm not showing you today but it's a really [INAUDIBLE] Redux as well is it works really well with type script. Because I can basically say like, if I have a set search term, in fact I can show you what this look like with flow, which is pretty similar.

[00:01:01] And I think I have it in FlowType maybe, types. So this is FlowType, but TypeScript looks almost the same here. You can say hey, if it's a set search term type of action, then is gonna be a string type and if is not a string type then fail.

[00:01:19] It doesn't pass my type checking or if it's ADD_API_DATA then is gonna be show type or it gonna be animal type or pet or something like that. So you can actually have your type checker make sure that action type match up with the The type that's being served with it.

[00:01:37] So that's up to you, it's a personal decision how you wanna handle that kind of thing. But yeah, we're working together with a type checker and with Redux is quite nice. Other questions?
>> Speaker 3: I've got a question.
>> Brian Holt: Yeah?
>> Speaker 3: With Redux where you get the time traveling, debugging, just a lot of sophistication to be able to control the state of your application.

[00:02:11] Is there anything like that if you were to go with the context route?
>> Brian Holt: No, I don't think so, I don't think react has that ability. Those set states are not necessarily gonna be like atomic transactional things. So you don't have some of the guarantees that redux does by enforcing this transactional nature of the reducers and the action types.

[00:02:34] So,
>> Brian Holt: Not that I'm aware of.
>> Brian Holt: Okay, I don't think so. So if you want that and that's important to you, you have to use something like Redux.
>> Brian Holt: Probably just one last thing I wanna add onto here before we wrap up the Redux section
>> Brian Holt: Redux is not the only type of central data store.

[00:03:00] There's also the various flavors of Flux, like Flummox and Alt, and all the other ones that I can't remember, all the various cute names around Flux, right? As well as MobX.
>> Brian Holt: I would personally say that there's no reason to use any other flavor of Flux, Redux is the one that is the best out of that type of thing.

[00:03:26] That you have some sort of central data store that you're dispatching actions to, Redux kind of nailed that. Redux arose out of something called Flux that Facebook used to use and they kind of have migrated away from that. So if you're interested in that you can go read about Flux.

[00:03:42] I still think it's on Facebook's read post that you can read about it. But I think Redux is a much better version of that. They just kind of nailed that API and the other ones have kind of died off at this point. But the other one that does live on, that people are interested in, is one called MobX.

[00:04:00] MobX is more based on observables and functional reactive programming, and I'm not gonna say a lot more than that. From my impressions of it, I've never written code with it. So that's why I don't want to tell you too much about it. But it is more powerful, it's more expressive, and it's a lot, in my opinion, much more difficult.

[00:04:22] As soon as you're getting into functional reactive programming you're just kinda leveling up the amount of knowledge that every engineer needs to have about your application. So, I've never used it and I've also very rarely felt the need to use it. Because this is complicated enough for me.

[00:04:37] MileBacks is more complicated, I think.
>> Speaker 1: Steve Kenney does have an entire advanced state management course with React, which covers all these different kinds of variance in flavors.
>> Brian Holt: Cool, yeah, so definitely, I mean Steve's a great teacher, so definitely check out Steve's course.