Okay.
Welcome to section five.
And in this section we're going to be focusing mostly on Redux a tool to manage global states in our
react application.
And Redux is a super popular tool to do this.
It's not just for react, it is for other libraries and frameworks as well.
But of course we're going to be using this with our react application.
So coming up in this section then we are of course going to be taking a look at Redux, but also how
we bind this and make it usable in our react application.
To do that we add another package called React Redux which provides the bindings for Redux.
And we're also going to take a look at using Redux Toolkit.
Now, the makers of Redux discovered that many developers were introducing bugs into their applications
because they didn't follow the very strict rules of using Redux, and Redux toolkit was created to help
reduce the number of mistakes that developers make, And also it does a great job of reducing the amount
of boilerplate that we have inside our code when we use a tool like Redux as well.
Also, in this section, we're going to take a look at Redux Toolkit query.
This is the tool that we're going to use for data fetching in our application, as it gives us a lot
more power and flexibility than a simple fetch does.
And it also solves some problems that we have as developers when it comes to data fetching.
Things like how are we going to handle caching, how are we going to handle loading, and how are we
going to handle errors.
And Redux toolkit query solves all of these problems for us, and greatly reduces the boilerplate kind
of code that we would need to write to achieve that functionality.
So we're going to be taking a look at that as well.
And we're also going to take a look at one of the best developer tools out there, which is Redux DevTools
in this section.
But first of all, we need to answer the question, what is Redux?
Well, it's a store for our application, kind of like a database, if you will.
Specifically for our client side application states, and this states that we store in our Redux store
is accessible across our entire react application.
Any component in any location will be able to access and update the values inside that Redux store.
So this removes any need for prop drilling in our application, because we can simply access and store
values in a global store.
Now we can only have one Redux store per application, but we can organize ourselves by splitting it
into slices.
So we'll have things like a catalog slice, a basket slice and an order slice, and we'll just create
slices as and when we need to, which makes sense structurally in our application.
We're also going to take a look at using React Redux to be able to provide Redux to our application.
And what this provides for us is a provider, so we can provide effectively our Redux store to our react
application.
And this also provides us with some hooks that we can use to access and update the store.
Specifically for accessing and reading from the store.
We're given a use selector hook, and this allows us to access the store and display the value inside
our components.
Now, if that value that we're using inside our component is updated by this component or another component,
then our component will be aware of that change and it will cause the component to rerender with the
updated value so that updated value displays in the user's browser.
Also, we can update the store from anywhere in our application, as we're also provided with a use
dispatch hook, and this allows us to dispatch actions to our store, which will then update the value
in that store and any components that are effectively listening to that value that will cause that component
to be updated, and it will cause it to rerender and display the outputs in the user's browser.
So let's take a look at Redux Flow before we get our hands dirty with using this.
Because when we do use the Redux toolkit, then a lot of the flow, if you like, is abstracted away
from us.
So we don't really see it so clearly in our code anymore.
But we will take a look in the early part of this section at using Redux natively, without using Redux
Toolkit, just to have an understanding of how Redux works.
But just to give you an idea of the general Redux flow when things happen, then if we take this example,
we've got a very simple Redux store with a value of count set to be equal to one, and then we're displaying
that value in a component in our react application.
Now, if a user was to click an increment button to update the count to two, then we need to notify
our store.
So we would dispatch an action to a reducer, which then would update our Redux store value.
From there we go via the provider and then to our react application, which then notifies our component
that that value has been updated and cause that component to rerender.
So what is a reducer then?
That's new and I haven't mentioned that yet.
And a reducer in Redux is a pure function.
It takes the current state and an action as arguments, and it returns a new state based on that action
without modifying the original state.
And the name reducer comes from the concept of functional programming, where an array of values is
reduced to a single output.
So in Redux, the reducer reduces multiple actions over time into a single state object, which represents
the current state of our application.
So there are some best practices associated with this, but when we use Redux Toolkit, we don't need
to think about these so deeply.
If we were just using Redux without a toolkit, then these become essential to know and understand.
But when we're using the toolkit, a lot of these are taken care of for us.
So, for example, a best practice is to not mutate the state.
Whenever we want our state to be updated, we create effectively a clone of that state, update that
clone, and then replace the state with the clone that we've just updated.
We would never mutate the state directly, and if we did, we can cause bugs in our application.
Another best practice is that reducers must not have side effects.
When we're updating the store.
We can't go off to our API, get a different value, and then bring that back and then use that to update
another part of our store.
So reducers must not have side effects.
But there are times, of course, where we're going to want to go out to our API to get some data to
populate into our store, and that's something to think about, but it's not something we're going to
think about until we come to RTK query, which is a tool designed specifically to handle that scenario
also.
We must not have non serializable values in our state or actions.
I'll accidentally demonstrate what happens when we do that.
At some point during this training course because I did make a mistake somewhere along the lines.
But when we do do something that's outside of best practice, we do get warnings about this.
So it's not something that's easy to make happen.
So keep an eye out for that and see if you can spot it before I do.
When we do come across that.
But I promise you, if you do come across that, we will resolve it before the end of this section or
when it's noticed in our app.
And we can also only have one store per app, which is fine because we can split that store up into
multiple slices.
So as mentioned, we don't need to worry so much about these best practices because we're going to be
using the Redux toolkit, a utility made by the makers of Redux to help us out when using Redux so that
we don't introduce bugs into our application.
But there's many good reasons to use this, and it is a best practice, by the way, to use Redux Toolkit
when we're using Redux.
So this gives us opinionated code effectively.
Redux was never opinionated, but it had very strict rules about how we could use it.
Redux toolkit is opinionated on how we structure and use Redux.
Also, it provides sensible defaults for store setup, and effectively we can create our store just
using one line of code using this, because the defaults that it uses are the ones that we would want
to use anyway.
It also includes commonly used add ons built in.
I mentioned the Redux dev tools, which are excellent, and previously they would be something that
we would need to add to our project, but now they're built in to Redux Toolkit.
So again, we don't need to worry about that.
And when it comes to using things like RTK query, that's also built into the toolkit as well.
And also it helps us to simplify our code.
And one of the best practices that we mentioned was that we're not allowed to mutate our state, but
we're going to be what appears to be mutating state when we use the Redux toolkit, because it comes
with a library called IMA that allows us to write code that appears to mutate the state directly, but
under the hood, it ensures the state remains immutable as it will wrap our state, changes in a proxy
object, and create a new, immutable copy of the state based on those changes.
Again, it's something that happens in the background without us seeing it take place, but it does
simplify our code, which of course we benefit from.
And another thing that Redux Toolkit gives us or takes away from us is boilerplate code.
We write less boilerplate code than we would do if we were using Redux natively, and we'll take a quick
look at using Redux without the Redux toolkit first, just so we get an understanding of Redux, and
you'll see what I mean by boilerplate.
So let's begin.