Intermediate React, v3 Redux Overview

[00:00:00]
>> So we just talked about TypeScript. And we are about to get into Redux. I have a interesting and checkered history with Redux. I do actually really like it. But it's also been a great source of stress in my life if we're gonna be totally honest about it.

[00:00:17] But I think it's useful for you to know it as a tool and, inaccurately when I ask people are like what do you wanna learn about Redux? One of the top topics is always what about Redux? So I'm just gonna teach it to you so that you can understand what it is when you might wanna use it, and when you might actually wanna use something else.

[00:00:36] So we're gonna go back to another fresh copy of our repo. So I'm gonna close this. So this is another fresh copy of my repo here. I'm gonna run npm install really quick. So let's talk about what Redux is, where it came from, why it came about. Initially, there was a thing called Flux and Facebook used to use this thing called Flux and empowered a lot of their react front ends.

[00:01:06] Famously the ads product was all built in React and Flux. The idea with Flux is it was a data store that lived on the side of React. So you had react over here you had Flux over here. And React would send actions over the Flux stores and then the Flux stores and send back the data.

[00:01:24] And the idea is we need wanna isolate the data portion of our application from the view portion and have the view portion just read from that. Well, for each individual piece, they had an individual Flux store and at one point, they famously had over 100 Flux stores on one page and that's when they finally said, now we're out.

[00:01:41] We don't like this anymore. And so people blew or didn't like Flux as much. So very smart person who is now currently on the React team. Dan Abramov came up with this idea of Redux. He's like, instead of having 100 Flux stores, why don't we have one Redux store.

[00:02:00] And then everything is just like a property in that one Redux store. So you have one state tree, as if people say. This ended up being actually a pretty decent user experience and so people stuck with it, but the general idea is the same. You have one store, React reads from the Redux store.

[00:02:18] And then in order to modify the Redux stores, it sends actions back to the Redux stores, and actions are just like, make this thing change, right? So, if you remember the useReducer portion, right? We sent back in action says, hey, increment this by 50, or decrement this by 50, that's exactly Redux.

[00:02:35] That's all Redux is and so useReducer is basically just like a mini Redux store. We're gonna take that that idea of a mini Redux store and we're gonna make a normal Redux store. So, what are good reasons to use Redux? One, we have context already. So it actually became a little bit more obsolete recently when we got a better form of context.

[00:02:58] But it still has its good uses, right? So one thing Redux code is extremely testable. And when I say extremely tough, I mean, it's extremely testable that you can test basically every portion of your Redux stores and that why that's positive is changing state is usually what causes bugs.

[00:03:19] Your state changed in some unexpected way. So if you can test every portion of that, make sure that it all integrates correctly, you can have confidence that you're not gonna have, at least bugs in the way that your code is tested, right? Otherwise your test will fail. The other thing is that debugging in Redux is really cool.

[00:03:39] And I'm gonna show you at the end how to do that. So let's talk about the life cycle of Redux and this is verbose. I'm being verbose on purpose, but it's also complicated. Let's say you have a Textbox and then the state of that Textbox is stored in Redux.

[00:03:59] Let's talk about the process to get from the user typing to it being stored and then rerendered and read and react. So user types and input box. This calls an action creator, which creates an object that's called an action. Then you call the dispatch function which dispatch that action to Redux.

[00:04:21] Redux then takes that action with the current state of the store and that action, and it calls what's called the route reducer. And a reducer is just a function that takes in state and an action and returns new state. That's it. Okay, the route reducer will often delegate that to a smaller reducer through a smaller reducer will then do whatever that action says, right so it'll modify the state in some way.

[00:04:45] It'll return that. The route reducer returns the state of the new store that is then fed back to React and React uses that state to render the view again. It's a lot of words. It's very abstract. I'm going to walk you through that in code, but I just want you to be prepared for that.

[00:05:03] Those are the steps that we're gonna go through. So, it takes a bit of setting up, a bit of ceremony. So, stick with me while we set this up. Okay, the first thing I want you to do now is I want you to do npm install Redux at 4.0.5 and then React Redux at 7.2.2.

[00:05:32] This install Redux and the connecting layer between React and Redux. Okay, we're gonna make a new file. We're gonna save that in our source directory and we're gonna call it store.js, lowercase store.js cuz this is not a react component. This is a Redux store. We're gonna import create store from Redux and we're going to import reducer from a yet to be created reducer.

[00:06:13] Okay? Now this really can be as easy as const store equals create store. Store. This is enough for us to create a Redux store. But let's take this one step further. This thing's called the Redux DeTools. And I'm gonna show you how to implement them now cuz it's easier if we do it this way.

[00:06:37] So we're gonna say type of window. We're just gonna make sure that the window is an object which this means that this can run in node without any problems. And Type of window dot underscore underscore Redux DevTools extension. So if you install the Redux Dev Tools extension, it populates itself on this particular global variable is not equal to undefined.

[00:07:14] By the way, I just copy and paste these off the redux site every single time I almost never write these. If it is then call that function. So if that's a thing, Call that function. Otherwise, just give it a function of returns. This is called an identity functions, something that returns itself.

[00:07:43] I don't really need to care too much about what this does but basically, if Redux DevTools are installed which you're gonna Like the Chrome extension store or the Firefox extension store, you'll enable them. If not, they'll just not do anything, that's the gist of what we typed out here.

[00:08:00] And then we're gonna say export default store. Okay, so now we have a Redux store, it's really easy to set up. Now, let's go ahead and go code our first reducer.