Okay, So now we're going to jump back into our front end and we're going to start to implement Redux
and Redux Toolkit.
So Redux is a popular JavaScript library for managing application state, and it's often used with React,
but it can be used with other UI libraries slash frameworks, and there's many other state management
libraries available.
But Redux is one of the most popular and well supported.
It's been around for a long time.
There's a lot of documentation and examples, etcetera.
Now I will admit that redux can be kind of confusing at first.
It's a tool that does take some practice to use effectively.
However, once you get the hang of it, it can make building really complex applications much easier.
And in this course we're going to be using Redux Toolkit, which is a package that includes several
tools to help making Working with Redux easier.
It addresses a lot of the issues that Redux has just using it by itself, especially when it comes to
making requests and dealing with back end APIs.
So before we dive into Redux, let's just talk a little bit about State.
So there's component level.
State which is state that is only it only matters in that actual component.
So for instance, if we have like a header like we have here, we have a menu and this menu collapses,
right?
It can be open and closed.
So you might have a piece of state called is open.
That's set to true.
When it's open, it's set to false when it's not.
That only pertains to this component.
The rest of the application doesn't care about that.
So that's component state.
Now app or global State is state that is going to be distributed to multiple components.
So an example would be the actual products here that we're fetching from the back end that's going to
be put in app level state.
Although right now if we look in the home screen, we're just keeping it in this component using the
use state hook use state is really for component level state and not global or app level state.
So we're going to switch this up.
This isn't this isn't like the end result.
I just wanted to get something on the page.
But yeah, so that's the difference between component and app level.
State also called global state.
Now state management refers to the way that we manage the data that our application needs to keep track
of.
So I just want to give you a quick example.
You guys don't have to do this.
I'm just going to use this file to to type in.
But let's say we have a to do a little to do application.
We might need to keep track of the items that the user adds to the list.
So we might have something like a variable called items and that would be an empty array.
And then maybe we have some filters.
So we could say like const filter and that could be set to all or completed or whatever.
So that's an example of state.
Now this is a very simple example, but it shows the basic idea.
We have two variables that we keep track of, and that's our state for application.
Now we can add items to the list this items array by using push, right?
So we might have a function.
Called Add item.
That takes in text and then we may do something like items dot push.
And pass in an object spread across text that's passed in.
And then maybe we have a completed value set to false.
Right.
So we're directly editing what this item's variable holds.
Now this looks fine, but it's updating the items array directly, which means that any other code that's
reading from this array might not see the new item that was set.
And this can lead to bugs that are very hard to track down.
So Redux solves this by forcing us to update the state and the very specific way.
Okay, We can't just update the state directly like I'm doing here.
Instead, we have to dispatch an action which is an object that describes what state change we want
to make.
And then the Redux store will then run what's called a reducer function to figure out how to update
that state based on the action.
And this makes it harder to accidental update state in the wrong place.
Now you're going to hear terms like action and reducer.
And it might sound confusing at first, but don't worry.
We're going to talk more about that as we move along.
All right.
So I would say in summary, state is it's held at the app level and it's updated through actions dispatched
to a reducer function.
And the updated state is sent down to any components that need it, ensuring that all parts of the app
have access to the most up to date information rather than changing the the existing state.
And I know that's a lot to take in.
And most of the explanations of all of this are over complicated.
In fact, if we look at Redux.
Diagrams and we look at images.
So yeah, a lot of this stuff is, is just over complicated and things that you don't really need to
be here at this point if you're just learning this stuff.
In fact, I think the best one is probably this because it's simple and it explains the overall picture.
So basically you have your view, which is your your UI, all your React components and everything,
and then you have your state and your state usually has some initial values that it sends down.
So like our products, for example.
And then if you want to change a piece of your state, like add a new product, then you'd have your,
your form to, to create a new product and then you'd have an action that fires off with that new product
as the payload.
And then your action here, you would do your, your fetching.
So if you're working with a back end API, you would fetch that data and then you'd have a reducer function
that will then change the state.
So it will add the new product and then it will get sent down not only to a single component but to
your entire application so that anywhere that uses that product or those products, that's going to
update and that's where, you know, so you don't run into the issues that I talked about where some
parts might not get updated.
All right.
So hopefully that kind of just gives you a basic picture of how this works.
If you've never done this, if you've worked with Redux, if you did the first version of this course,
you probably understand the you know, you have a general understanding.
All right.
So yeah, in the next video, we're going to start to implement Redux and Redux Toolkit.
So I will see you in the next one.