Intermediate React, v4 Redux

[00:00:00]
>> As a reminder, we are here section 14 and we're going to do Redux. I am going to stop my server here. I'm going to get out of this, I'm gonna copy over my portals and refs folder. And I'm going to copy that into a folder called like Redux or something.

[00:00:22] And then inside of redux, we're gonna run npm install. That'll take a second. And then I will open Redux in my editor. This one can go away. I don't care about TypeScript anymore. Though, before we get started here. TypeScript and Redux work together super well. Like those things are like made for each other, if you gonna be doing Redux, I strongly suggest that you pair it with TypeScript.

[00:01:05] Because all of the actions and stores and things like that, which we'll get into it will make sense in a second, but they work super well together. So let's talk about Redux, particularly if you've been watching all of complete intro and all of intermediate. I've alluded to Redux quite a bit.

[00:01:24] And it's just because it's a really popular library to pair together with React. There was a time where basically like React Redux was like a complete thought that people just assumed always win together. I would say that I did not always feel that way and I'll say that with the advent of a useful context API and hooks that that has more mostly obviated the need for Redux.

[00:01:52] I'll say that like 95% of the use cases of what you used to use Redux for are no longer applicable, you can do it just in straight up react and you don't need Redux. There are still some use cases where Redux is helpful and useful. And I'll maybe talk about that at the end.

[00:02:09] But still, we're gonna talk about Redux now, we're gonna go through a full implementation of it. And the reason why is when people learn react, their first question is, is what about Redux? And so now because so many people have that question. I want them to be able to answer that question for themselves.

[00:02:27] So why do we have Redux? One context used to be really bad react context that is and so that got fixed quite a bit, but it used to really be bad, so we didn't have that. The second thing I'll say is this Redux is extremely testable, and we saw that with the use reducer when we were going over that in the hooks and depth section.

[00:02:51] Use reducer is just imitating Redux, right, that's the point of it. But Redux is kind of the big value proposition of Redux is that everything that you write in Redux is extremely testable. It's extremely modular. And so that makes it, useful for a subset of things. And then the other thing I'll say is it has this really cool debugging story that has like a whole extension, we'll I'll show you how to use it here in just a bit.

[00:03:22] But the bugging Redux is actually quite nice, the tradeoff here is that Redux can be kind of hard to follow, like it can be kind of hard to read the code and I'll say that it is a, Simple, but hard library. You can actually implement Redux in about 80 lines of code.

[00:03:41] It's really not doing very much for you. But I'll say, despite the fact that it's simple in the sense that it's a small API and it doesn't do a lot, it's actually really hard to kind of wrap your mind around what you're supposed to be doing with it so.

[00:03:56] And I'll contrast that with something that's like complicated but easy. So I would judge personally that Angular is a very easy thing to work with, but it's complicated, right, and it's big and it does a lot of things for you. So take that for what you will. So React state management is a pretty simple thing as it exists today.

[00:04:21] You call set state or you call like a use state hook or the set state from US From the hook, and then you update the state and then react re renders like the contract there is very simple. The problem is that Redux can solve for you is that it's hard to test changes in state, right?

[00:04:47] So if I'm going from state A to state B, inside of a React component, you would have to expose that to make that testable, or you have to pull it out to make it testable. Whereas with Redux, it does that for you pulls all of the state management out of it, so you can just test the state management part of it.

[00:05:03] That's the best thing that I can say about Redux there. So let's go over the entire lifecycle of what happens with Redux. And then we're gonna go code it up. The reason why we're gonna do this is because Redux is kind of all or nothing. Like it was nice with TypeScript.

[00:05:23] I could like we could write a little bit and then see if it worked and then write a little bit and see if it worked, right? Redux unfortunately is like you have to go from 0 to 100 and there's no middle ground, right? So we're gonna have to do a full rewrite and we don't get to have any like checkpoints or milestones or something like that you just got to go from zero to the to the end and pray that everything worked.

[00:05:42] So I want to explain everything that's about to happen to you, then we're gonna do it, and you're gonna experience it and you're gonna say what the hell are we doing? And then at the end of it, you might still be asking what the hell we're doing, but you'll at least have some understanding of why we got there.

[00:05:57] Okay, so let's open our application here and I'm gonna run my server. I think I already installed, right? I didn't, so we're running on 1, 2, 3, 4. So here's our application. And I wanna explain to you, I guess what Redux does first it's a data store, right?

[00:06:20] So if you think back to context, it's like application level available data. Basically, what Redux is gonna do is we're going to basically pull all of your data out into a store that lives side by side with React. And then every time that we update the data store the data store then informs react like hey stuff changed please update accordingly, okay?

[00:06:48] So instead of location living in a hook here, right, we're gonna move this into Redux. So if you remember here I'll show you in search params. If I type into the location here, I press A, that is going to call update location here. This is a function that came from the hook and then that's going to update React.

[00:07:16] Search params is going to run again it's gonna rerender and the state of the hook here is going to be, whatever I type in there, right? So if I type A in this cause update location that informs React, my hook has changed React re-renders and here we are.

[00:07:32] Right, pretty short little cycle there, what happens if this was a Redux, enabled form? I would type in the form, right, that would call the event listener down here. Instead of this calling update location, it would dispatch an action to Redux. So typically you're gonna call the action creator, which is going to create an action object.

[00:08:00] So that action object is then going to be passed to Redux, right? Redux is then gonna pass that into the route reducer and a route reducer, all it does is it takes in old state, it takes in an action and returns to you news state, right? And that's the progression, so we pass it to the root reducer, the root reducer might delegate it to a sub like another reducer, right?

[00:08:22] So that your root reducer is very simple and then you have like sub reducers that handle all the various different types of actions, right? That reducer will return a new state given the action and the old state, which will return to the root reducer which will then return to redux.

[00:08:39] Redux will say cool I got new state. Redux will then call into reactors and say, hey, I have new state here at which point reacts will say, cool, I'm gonna rerender it and then you'll see the change manifested in the user interface. So we took what used to be two steps and made it into ten steps.

[00:09:01] I hope you're asking something like, does that seem worth it? And the reason why it's useful that it's broken to ten steps is basically all of those steps are now testable. You can say given this given this I get this, right, and you can test that all along the pathway from user types into user sees it and react.

[00:09:21] And I said this earlier in the course, but I'll repeat the mantra here, which is basically most bugs arise from handling change in your application poorly, right? Change in state, it's some manifestation that your state did not change in a way that you expected it to. This is one way to assure is like if I have this and I have this and I get this, then everything's gonna be okay.

[00:09:44] And you can assure yourself of that, that's the entire point of Redux, okay? So I know we're very abstract at the moment. Let's go and actually make this concrete and start by working on this. So pause your application for just a second, and let's go ahead install npm install redux@4.1.2 and react-redux which is just bindings from react to redux so that they can talk to each other well.

[00:10:15] You can actually implement yourself react- redux fairly simply, don't cuz someone else did it and they did it really well. But I'll tell you that React Redux is just not that complicated. At 7.2,6, okay? Awesome, and you can probably start your server again or whatever hold check later.

[00:10:44] And then we're gonna create a new file here and source and we're gonna call it store.js, Okay, new file store.js We're gonna import a function called Create store from Redux. Okay, then here we'll import something called reducer from./reducers. We'll make this here in just a second, but for now, just pretend this as a function that we're gonna write here in a little bit.

[00:11:28] Okay, create something called a store and equals create store. Reducer. Now this would be enough for us to get started here and then you just say export default store, and we will be done here. We're gonna look at the Redux dev tools here in just a second, so let's go ahead and make that available.

[00:11:55] So the first thing we're gonna do is we're gonna be kind of defensive of if we instantiate this or not. So we're gonna say, and I just took this directly from their docs by the way, if typeof window === 'object'. So if we're not in node, right, cuz we want this to still be able to server side render, and, typeof window.__REDUX_DEVTOOLS_extension which, by the way, you can totally just copy this from the Docs cuz this is exactly what I did.

[00:12:37] __ So as they call it in Python land the Dunder, I did not make that, tp the double underscore. That's not undefined. Okay, we'll do a ternary here. Either we gonna call this cuz this will be a function. Otherwise, just give it a this would be called an identity function, all right, that might be a little bit easier to read now.

[00:13:21] So what have we done here? One, you don't really need to care, again, if you just copy the stripe here. The docs, you would never care what it's actually doing that we can even just put a comma in here. This enables the redux dev tools. But if you're curious what it does, it checks to see are you in the browser?

[00:13:40] And do they have the extension installed? If they do, enable the extension, otherwise, give it a function that will just do nothing. So here what we're doing is we're giving Redux a middleware. So Redux actually has tons of middlewares that you can use with it one of them is like Redux thunk that's a really popular ones actually talk about that in one of my former courses.

[00:14:08] Redux sagas Redux promises Is Redux RxJS, or I think it's called Redux Observable. All of those things would go here. And those are all basically ways of handling asynchronous code inside of Redux. At the moment, Redux doesn't do any asynchronous code out of the box. You have to augment it with additional capabilities via middlewares to be able to do that.