Setup Redux Toolkit

[00:00:00]
>> We just finished TypeScript. And we are going to talk about Redux now. So I've taught Redux as part of the complete intro to React for now years, right. I like Redux. I used to use Redux quite a lot. And then there was a long period of time when React, core React kind of caught up to not really needing Redux anymore.

[00:00:24]
That I kind of let it fall by the wayside. In fact, the past couple courses I've taught Redux, I kind of preface it always with-. I'm going to teach you Redux ,so that I hope that you don't use Redux later, right? Cuz most people kind of have like this association with React and Redux kind of in the same line of thought.

[00:00:46]
I'm gonna say this has changed relatively recently. They released something called Redux Toolkit and they took what was hard about Redux, and they made it very easy. So I'm kind of coming back around to, from never use Redux, to maybe sometimes in specific cases Redux Toolkit can solve some really cool problems for you.

[00:01:13]
So why do we have Redux? Maybe let's start with what is Redux? Redux is a central store for your data. So if you remember from the complete intro, we talked about context, right? We used to not have context from React, that used to not be a thing at all.

[00:01:30]
And so having a centralized store for app level data, you needed some third party library to do that. We had Flux before and then we ended up with Redux. Which is kind of the pinnacle of the Flux architecture. But we ended up also with MobX and and some other I don't even know how to say that.

[00:01:53]
But there's that library that I can't pronounce. And there's a couple other ones. I still think at the core of it Redux is probably the most popular one. But yeah, there are some other options there as well. Then we got context we didn't really need a centralized store anymore, because we have this ability to share context across a app.

[00:02:16]
And so Redux ended up being kind of superfluous at that point. So I'm coming back around that with Redux Toolkit, which is this, basically it's a framework around Redux. That Redux can now be useful again. So, why do we use Redux? Context used to be a lot worse, but now it's better.

[00:02:39]
But the nice thing about Redux code is it's extremely testable. That's the point of Redux, is they basically take all of your state change, right? Going from state A to state B. And they make all of those transition states testable. 95% of your bugs and UIs is just gonna be state management gone awry, right?

[00:02:59]
So, if you can make stateful transitions testable, you're going to eliminate entire classes of bugs that your app is gonna have. That seems pretty useful to me, right? So it's testable and it's debuggable. Which two of my favorite things if you've been listening to me long enough. I always harp on is this readable, is this testable and is this debuggable?

[00:03:23]
So that's where we are with Redux. It used to be really verbose to set up. And Redux Toolkit has now made that not very verbose. So if you want to learn raw Redux without Redux Toolkit, take version seven of this course, right? It'll be version four of Intermediate React.

[00:03:50]
That has a whole section on Redux. It goes through with raw Redux. But today we're gonna go through with Redux Toolkit which I think is gonna be a more pleasant experience for you. So Redux, it's just, they kind of pull apart all the various different parts of changing state and it made it hard to write.

[00:04:12]
But now we're gonna use Redux toolkit which is going to make it a lot easier. So start with a fresh copy of the application. So if you've been doing like the TypeScript stuff, put that aside. And we gonna start again from a fresh copy of 14-context from the repo.

[00:04:33]
And then we're gonna say npm install @reduxjs/toolkit. And we're gonna do @1.8 .6. And then we're gonna use a library that glues, React Redux together, called react-redux@8.0.4. So that is to say, you can use Redux outside of React. Redux works with Angular. And I imagine it works with a lots of other frameworks as well.

[00:05:06]
But we are going to be obviously using it with React. Okay, so now that we have that, we're gonna go into our source directory. And we're going to create a file called store.js. This is basically where we're going to instantiate our Redux store. We're going to import. Configure store from @Redux-toolkit, we're going to const store equals let's get rid of that configure store And we are gonna give it like a reducer object here.

[00:05:56]
And for right now, it's going to be empty, but eventually we're gonna start giving stuff to it, and then we're going to export default store. This, if you've ever done Redux before, this should look pretty familiar to you. It's relatively similar. We're then going to migrate our existing pet adoption application to store some of its store, or some of its data, in Redux.

[00:06:21]
Not all of it. And when you use Redux with React, it's not like you don't use state anymore. That all of the use state calls that you're gonna use in React at that point are gonna be very much like, show this modal, hide this modal, is active is not active.

[00:06:36]
It's gonna be very UI state kind of, sort of state. As opposed to, you're gonna put everything into Redux, is gonna be the user, the pets, the location that they're in. Those kind of things, those kind of app level states. Okay, so in app.jsx you can delete the adopted pet context.

[00:06:59]
We'll get rid of that. And you can delete the use state here from React, so you can get rid of that. Okay. And then at the top here we're going to have to import provider. From React Redux and you're also going to have to import the store from ./store.

[00:07:33]
Okay, you can drop this use state call here inside of app, And you can basically replace this adopted pet context with the provider. The store equals store, like that and again. So I just replaced the adopted pet provider with just the provider from React Redux. So this is going to stick our store on the context for React.

[00:08:12]
Which means now anywhere inside of our react application, we can access this Redux store. There's nothing in it yet, but we'll get there. You can kind of think of Redux as a miniature database for your little application. It's an imperfect analogy, so don't run too far with it.

[00:08:35]
And then you can kind of think of, we can dispatch actions and queries to our little database, right. Kind of an imperfect way to think about Redux and what it does for your application.