Intermediate React, v2 Redux Introduction

Transcript from the "Redux Introduction" Lesson

[00:00:00]
>> Brian Holt: This is a little bit abbreviated from previous versions of Redux that I've taught. And the reason being for that is Redux is kind of becoming less and less important in the React community. With the advent of solid context API, we don't need it as much anymore. And now that we have useReducer, we kinda got a lot of those benefits as well, so we need it even less.

[00:00:23] Now you're asking, when would I ever use Redux? The answer today is I probably won't ever use Redux professionally again. I probably won't elect to use Redux ever again, but I'm not saying that you shouldn't. So if it really jives with your mental model of a problem or something like that.

[00:00:40] Or I might later run into a problem that's like no, man, I wish I would have used Redux. So I don't know, but I don't have a good mental image right now of when I would use Redux. So the reason why I'm still gonna teach you this is because I want you to decide that for yourself, right?

[00:00:54] We're gonna walk through all the various pieces of Redux that you need to know to make that decision for yourself. And the other thing is there's still a lot of code bases out there that still use Redux, and so you still kinda need to know it. So the one thing that I would say that maybe I would use Redux for is if I had a lot of asynchronous things going on at once.

[00:01:14] Maybe I had to make a request to ten different APIs, and they had to be in the right order and come back in the right order. One, that sounds like a really hard problem, but Redux would actually be very helpful in that scenario with something called Sagas, which I'm definitely not teaching you today.

[00:01:31] But Sagas are very difficult, but they also are powerful. I believe that Steve teaches them in his Advanced State Management course on FrontEndMasters. So if you wanna know more about Redux, watch Steve's course. Or if you wanna know more about React and Redux together, version three of this course goes a little bit further than I wanna go today.

[00:01:54] So today we're just gonna go over synchronous Redux, right? We're not gonna go over the asynch stuff, we're gonna even go over thunks or anything like that. We're just gonna go over what Redux is.
>> Brian Holt: So again, how did we end up with Redux? We didn't use to have Context, so this used to be a lot more useful.

[00:02:11] But now that we have good context, even Dan Abramov, the creator of Redux is like, I don't really use Redux anymore.
>> Brian Holt: Okay, so what is Redux for? Well, if you remember in the Intro to React, we talked about sometimes it's really useful to have a state store on the side, right?

[00:02:33] So we have our main application and all the components have all their state, but if I have a user, right, if every piece of my application needs to read from the user object, I don't have to pass that everywhere, right? So it'd be useful if I could put that somewhere on the side, and that's where Redux is really useful.

[00:02:50] It's a central repository for state in your application, okay? So typically in React you would just call setState and let React rerender, right? So if that's how something updates, right, I have maybe the user changes their email, I would just call setState and that would be the end of it, right?

[00:03:12] With Redux, we introduced a much bigger circle to get back to that point. So here I've kind of typed it out for you, user types in inbox or an input box. It calls an action creator to get an action that dispatches an action to Redux. Redux then inserts the action into the root reducer.

[00:03:30] The root reducer dispatches to a different reducer, which actually handles the state update. The reducer returns a new state given that action object. This new state becomes the source state, and that is fed back into React, right? So on one hand you have these eight steps versus setState, or an update hook, or something like that, right?

[00:03:55] One of these is a little bit simpler than the other, but I'll let you be the judge of which one that is. So why would you do something like this? One, every step of this is testable. So that means you get to observe how your state changes through every step of this, right?

[00:04:17] And that's valuable, right? You can basically say this mutation of state, I can guarantee that given this is going to go through correctly. And that's why Redux is powerful. So let's go ahead and get started on this. So go to your Code Editor and we're going to npm install redux and react-redux which is the very thin connector between Redux and React.

[00:04:48] Because as you may know, you can use Redux with Angular, you can use it with Ember, it works with any framework. You can use it without a framework.
>> Brian Holt: I think the other thing that I wanna say about Redux is it's a very small library. You can actually write Redux in about 50 lines of code.

[00:05:09] And that's just kind of mind melting, right? But the other thing that I wanna say is that doesn't mean it's easy, [LAUGH] right? So I've heard someone phrase it as, it's simple but hard, right? As opposed to complex and easy, right? I would judge old AngularJS as complex and easy.

[00:05:28] It does a lot of stuff but it's actually quite easy to get up and running with it, but it's also easy to get yourself in a really rat's nest kind of tangled mess. My applications that are still in production in Angular are a perfect example of that. Which is my fault, not their fault, right?

[00:05:45] But I would say that Redux is very simple in that it's not very big, and there's not a lot of methods to it, but it's quite hard to understand