Okay.
Now that we've introduced routing to our application, what we have now is different components in different
locations.
And because we're routing to our components, we don't really have the parent child relationship that
we had when we were not using routing.
So we need a different approach to state where we're going to store things in our application.
And a powerful and popular way to handle global state management in our application, so we can declare
some kind of property, some kind of state in our app.
And then that state is going to be accessible by any component in our application, no matter where
it sits in the component tree.
And Redux is a very popular way of managing global state.
It's very powerful.
It's probably overkill for our application, but the way we're going to use this in this training course,
it actually gives us some help with data fetching, caching and other things along those sides as well.
So we're really going to be talking about Redux for global state management.
And we're going to consider this as a store for synchronous state management.
Anything that we need to store that we're not going to get from an external source like our API.
And soon, a bit later in this section, we're going to take a look at a way of using some Redux based
tools to actually fetch the data from our application.
And it's pretty powerful stuff because it also allows us to cache data.
So if a user is browsing around our application and they go back to a page they've visited before,
that goes and gets data from our API, then we've got a way to manage that as well.
So Redux is the goal.
And first of all, in the early part of this section, I'm just going to spend a tiny bit of time,
a little bit of time demonstrating how we used to use Redux.
And so that we've got the comparison, I guess, with how we're actually going to use it to build this
app.
And if we take a look at the get started inside here, then what the makers of Redux suggest nowadays
is not to use Redux, how we used to use it, because they found that developers had a hard time not
introducing bugs into their applications by using Redux, because it's very strict on how we use it,
especially with things like pure functions, not using complex objects in our states and other elements.
Developers sometimes had trouble with Redux, so what they did is they created this thing called a Redux
toolkit, and that's their recommended approach for writing Redux logic.
So we're going to be using that, but not straight away.
We're just going to use Redux Core if you like, and just have a little look at how Redux used to be
used in our application.
Now, Redux is not specific to react.
It's very often used with react.
But if we want this to or if we want our react components to use this state, then we can use another
package as well as the Redux core and the Redux toolkit.
We can use React Redux, which are the official react bindings for react.
And this is just something else that we're going to install at the same time.
And what this will give us is a couple of hooks that we can utilize that allow us to select data or
state from our Redux stores, and also a dispatch hook that allows us to dispatch changes to the state
in those stores.
And we'll be using both of those hooks as well, so that we can update state from our component and
read the global state from our components as well.
So let's take a look at getting started and the installation here.
We just need to use npm install redux js toolkit.
Let's do this one.
First of all, because we shouldn't get a problem with the version of react we're using if you're using
the release candidates of react.
But we may do anyway.
And we may always have to do this when using.
Yeah we do okay.
So we're going to need to use the legacy peer dependencies again because of the release candidate nature
of react.
When react 19 is fully released, then this shouldn't be necessary.
And I mentioned it before.
It's just a consequence of using something that's not released stably yet.
This is just something that we're going to have to accommodate.
So I'm just going to specify a legacy peer deps and press return.
And this should install successfully now.
And as I mentioned we're also going to need the React Redux package.
So if we take a look at what we need for this can I find the installation?
Yes I can.
And we want to add this to an existing app.
So we just need npm install react redux as well.
And I have little doubt that we will also need the legacy peer dependencies here as well.
So I'm just going to also add this switch to this one.
Great.
Now we've got both of them installed.
So we'll start off as simply as possible with Redux because it can be.
If it's the first time you're encountering it.
It can seem a bit confusing at first, but we're going to start really simply and just show how to read
some data from a global store in one of our components.
So inside the let's see inside the features folder, we'll use our contact page for Redux testing.
And the way that I am going to demonstrate this stuff is we're going to have little Redux stores inside
a feature.
So this contact is just going to be used as a store for a counter.
So we're going to have a dedicated little store or a slice in Redux terminology for contacts related
states.
Or really it's just going to be a counter.
So I'm just going to create a new file inside here and I'm going to call it counter reducer dot ts.
And inside here let's create the code for a Redux store.
So I'm going to say export interface.
Or let's stick with type because I've been using type earlier on and I'm going to call it counter state.
This is the state we're going to use for our counter.
And I'm going to give it just one property called data that's going to contain a number.
Then we'll create some initial state.
What are we going to set this data to.
Initially when our application first loads.
And this is going to use the type of counter state and I'll say equals open curly brackets.
And I'm going to set the data property to the answer to the ultimate question of life, the universe
and everything, which of course is 42.
And that's a reference to quite an old book.
Now, The Hitchhiker's Guide to the Galaxy.
And then we're going to export our function, the reducer function.
So I'm going to say export default function, call it counter reducer.
And we're going to pass in as an argument our states.
And I'm going to set this equal to the initial state that we created above.
And then open curly brackets for the function body.
And all we're going to do right now is we're simply going to return the state and to reduce the function.
Really it's a function that takes some state and it can take an action as well.
And it returns new state based on the action.
It kind of acts like a decision maker that decides how the state should change when something happens
in our application without directly modifying the existing state.
So it's not doing very much at the moment, but what it's going to return to us is the state, which
contains a data property which is set to 42.
Now, in order to use Redux in our application, we need to configure a store.
So inside the app folder I'm going to create a new folder.
And I'm going to call it store.
Inside here I'm going to create a new file and just call it store TS.
And inside here we're going to use a Redux function to create the store.
So I'm going to export a function and I'm going to call it configure store.
And in fact no I'm not I'm going to call it configure store.
Because when we come to use Redux Toolkit that's a function they actually provide for us now.
Whereas previously we'd need to create this stuff manually.
So I'm just going to create this function called configure the store.
And I'm going to return Create Store.
And this has actually been deprecated.
Now they really don't want us to use this approach anymore.
And if we take a look at this then I think there's a legacy version of this that we can use without
getting a warning.
So yeah, we can use legacy create store instead.
So they're very keen on developers not using this approach for Redux anymore.
I am just giving this small demonstration regardless.
And this creates store is never going to be removed, but they've marked it as deprecated.
So it's really in our faces saying, hey, don't do it this way, we've got a better way.
Now use Redux Toolkit, which we will use soon.
So instead of using Createstore, I'm just going to use legacy Createstore.
So it's very clear that, hey, we shouldn't really be using this anymore.
And I'm going to pass in the counter reducer, which is the reducer that we have just created as its
argument, and I'll remove the one that we're not using at the top.
Now, in order for us to use this with our react components, we need to use something so that our store
is provided to our application.
So we're going to go back to our application entry point.
That's the main TSX.
And inside here we're going to provide our store to our application.
So just inside strict mode I'm going to have the left angle bracket.
And we're going to use the provider which we get from React Redux.
This provides us with our Redux bindings to our react application and add the closing tag.
I'm going to cut the router provider and put it inside the provider.
And our provider needs a property, a store or a property called store.
And we're going to set it to store, which is what we created or which we don't have yet.
I need to create a variable for this.
So just above the create routes I'm going to say const store equals.
And then I'm going to use the configure the store method, the one that we've created not configure
store which comes from Redux Toolkit.
And then we pass this to our provider.
Now if we take a look at what we get from store, if I press or type in store followed by a period,
we can see that we've got some things that we can do with this.
What's returned from the configure store method?
We can dispatch an action from here if we wanted to.
We can get state, replace reducer or subscribe.
But let's take a look at get getstate and we'll just log out and say console.log and we'll say store
and get state.
And what this will return to us is the contents of what's currently residing in our Redux store.
And if we go across to our browser and take a look and I'll just open up the Chrome dev tools and we'll
go to the console, we can see that we're outputting an object.
This is on main TSX line 15.
And if we expand the object we can see that we've got data 42.
Great.
So that proves that we can get stuff from our store.
And there's one final example.
Let's go to our contact page.
And inside here let's just display what we've got in our Redux store inside here.
Now the way that we do that is I'll say const data.
And then we can make use of one of those hooks that we get from React Redux.
And we're going to use the selector or the hook is called use selector.
And that's going to give us access to our Redux state.
So I'll use the use selector hook that we get from React Redux open parentheses.
And then we need to tell it what state we're looking for.
So inside here because we don't have great TypeScript usage at the moment I'm just going to specify
state.
And then I'm going to bring in the counter state from the react reducer.
Because that's what we're looking to get from our store.
Then we add an arrow and I'm going to say I'm going to go out and get state dot data.
And then this data will represent that number 42.
So let's do something in our contact page to display this.
So I'll open up a fragment and we'll use typography.
And we'll specify a variant of H2.
And I'm just going to specify a title for the page and call it contact page.
Even though it's not really going to be a contact page.
And I'll then specify typography again.
And this is going to have a variant.
And we'll just say body one.
Inside here we'll say the data is colon.
And then in curly brackets we can specify data.
Now if we go and take a look at our progress and I've got a little console open again I must remember
to close this because it's always quite scary when we see so many warnings.
But that's fine.
And if we go to the contact page, then we can see that we're getting the data from our Redux store.
So we have the ability to anywhere in our application, we can use that hook in any react component,
and we can go and get that data from a store.
But obviously that's not particularly helpful because it doesn't do anything.
So what we'll take a look at next is Redux Actions and how we can dispatch actions to update the states
in our global state.
And when that state is updated, that will cause our component to rerender and display the updated states.
And we'll take a look at that next.