Introduction

[00:00:00]
>> All right, so we'll learn a little bit about Redux today. Redux it is a state management tool, it is commonly used with React. But it doesn't have to be, redux can be used with any front end framework, redux can even be used anywhere JavaScript can be written.

[00:00:18]
Redux can be used on the back end, on the front end, with React, with whatever you wanna do with just vanilla JavaScript, with Angular. In this case where we'll talk about Redux and then we'll build some react applications with it to kind of see it in practice. All right, so what are we gonna cover in this workshop?

[00:00:36]
One of the things that I've noticed is a lot of times you're learning Redux, but you're learning Redux and React. And then there is a third library that we'll see in our time together called React-Redux. So all of a sudden, you sitting down you're learning Redux, React Redux, and then how to integrate into a React application and all the best practices around that at the same time, and all of a sudden, you're really sad, right?

[00:00:57]
And then you enter the next phase of learning React and Redux I've gotten really good at copy and pasting these pieces from the other part of the code base and I think I mostly know what they do. Or I've grabbed stuff from the documentation and it kind of makes sense, it works at least, right?

[00:01:13]
We're gonna try to move us to the third stage pass out which is, now I get it, I understand Redux, I can plug it into a React application, I understand each piece. So kind of work through it and see how each piece kind of builds on top of each other, and then finally we'll look at this thing called React Toolkit which is a another set of abstractions to take all the kind of low level stuff that we're doing.

[00:01:35]
And bundles it up real nicely, in a way that hides some of the inner workings, that I think are important to know but also allows you to kind of reduce the amount of boiler plate and TDM that you might have to go through while setting up a React application.

[00:01:49]
Finally, what good front end application doesn't have to make at least some kind of network request at some point to get some data. So we'll look at how do we make API requests and update our state as well? So it kind of slowly build, we'll use hooks, we'll use higher order components, we're gonna see each phase as we learned Redux all the way from.

[00:02:05]
Okay, here it is, just the library itself to building some small applications as we go along. Great, so the good news is that the API service area for Redux is pretty reasonable, Redux has effectively five methods are functions attached to it. And four of them are just helper utility methods, right?

[00:02:32]
They are just effectively not dissimilar from methods you might find in a library like Lodash or underscore, they just allow you to kind of take very common things and do them a little bit easier, right? And so we'll kind of go through the entire API surface area of Redux just by itself, right?

[00:02:52]
We're not gonna worry about okay, then I got to plug it into react application so on so forth. We will do all that but at first, what if we just mastered Redux? Seems good, right? So the question was, where are things like use reducer, or in this case, it's actually use selector and use dispatch.

[00:03:10]
They're not in Redux, that's not in the Redux library, right? That isn't a I kind of alluded to this earlier, a fun other library called React Redux, which is, neither react nor redux and is the bindings between Redux and React. So we will jump into that but that is actually not on the surface area of Redux, and that kind of makes sense.

[00:03:31]
If you think about it, cuz like we said before, Redux is very commonly found used in React applications but it doesn't have to be, right? You code, build a game with HTML5 Canvas and choose to use Redux to manage the state and application. You could decide I wanna use this in an embryo application and you could use Redux to manage the state in that application or Angular.

[00:03:52]
You could use it on the server side and node, you could also use it just as easily to kind of manage state using the same principles. So the actual core library itself is kind of just like unaware of react, right? And then we have those bindings in the either amazingly named or poorly named React and Redux library.

[00:04:14]
Cuz it on one hand does exactly what it says on the tin, on the other hand is kind of when you explain the what something means by using the words. And we'll figure out how to bind it into react application there, so it's actually not on the surface here of Redux.

[00:04:27]
So the question was, well why use Redux doesn't React these days come with a use reducer that is kind of basically the same thing. It is similar, but it also lacks a lot of the bells and whistles as well, right? One way to think about it is, you might have a single speed bike that's probably useful for getting around town but it's maybe not a mountain bike or a racing bike or something along those lines.

[00:04:56]
So one of the things that Redux has that they kind of built in version two react doesn't have is things like middleware built in, right? Things like the binding for high order components that will take care of memorization and try to avoid re rendering components when possible, right?

[00:05:13]
There's a lot of kind of just slightly more advanced things that come in Redux that are not in the use reducer hook that come in React. That in a large enough application, you're either going to find yourself needing Redux or if you're going down this kind of, reducer kind of path.

[00:05:28]
Or you might find yourself putting so many plugins into the built in user duser hook into React that you've effectively recreated Redux without the same level of support. Cool, Mark?
>> Yeah, could you briefly describe the difference between Redux and the context API.
>> Yeah, so the difference in Redux and the context API, which is Redux is very similar to this whole users reducer part.

[00:05:54]
The context API is actually used by both of them to kind of thread access to your store throughout the application. So, Redux isn't necessarily different than the context API in so far that it uses the context API, the React Redux library that we'll see in a little bit.

[00:06:09]
Uses the context API to give all of your different components, access to your Redux store from anywhere within the application. So both Use reducer and Redux will use the context API to make your store available without having to thread your props from the highest component down to the lowest level component and your events back up.

[00:06:28]
They both use the context API, so it's not necessary that Redux is different than the context API. It is using it as well as the use reducer hook.