WEBVTT 00:00.320 --> 00:00.800 Okay. 00:00.800 --> 00:06.410 Now that we've introduced routing to our application, what we have now is different components in different 00:06.410 --> 00:07.430 locations. 00:07.430 --> 00:12.650 And because we're routing to our components, we don't really have the parent child relationship that 00:12.650 --> 00:15.620 we had when we were not using routing. 00:15.620 --> 00:21.140 So we need a different approach to state where we're going to store things in our application. 00:21.140 --> 00:29.570 And a powerful and popular way to handle global state management in our application, so we can declare 00:29.570 --> 00:32.810 some kind of property, some kind of state in our app. 00:32.990 --> 00:39.710 And then that state is going to be accessible by any component in our application, no matter where 00:39.710 --> 00:41.810 it sits in the component tree. 00:41.810 --> 00:45.530 And Redux is a very popular way of managing global state. 00:45.530 --> 00:46.700 It's very powerful. 00:46.700 --> 00:52.550 It's probably overkill for our application, but the way we're going to use this in this training course, 00:52.580 --> 00:59.480 it actually gives us some help with data fetching, caching and other things along those sides as well. 00:59.480 --> 01:03.420 So we're really going to be talking about Redux for global state management. 01:03.420 --> 01:08.700 And we're going to consider this as a store for synchronous state management. 01:08.700 --> 01:14.130 Anything that we need to store that we're not going to get from an external source like our API. 01:14.130 --> 01:20.910 And soon, a bit later in this section, we're going to take a look at a way of using some Redux based 01:20.940 --> 01:24.810 tools to actually fetch the data from our application. 01:24.810 --> 01:29.280 And it's pretty powerful stuff because it also allows us to cache data. 01:29.280 --> 01:34.440 So if a user is browsing around our application and they go back to a page they've visited before, 01:34.470 --> 01:38.400 that goes and gets data from our API, then we've got a way to manage that as well. 01:38.400 --> 01:39.840 So Redux is the goal. 01:39.840 --> 01:45.300 And first of all, in the early part of this section, I'm just going to spend a tiny bit of time, 01:45.330 --> 01:49.200 a little bit of time demonstrating how we used to use Redux. 01:49.200 --> 01:54.810 And so that we've got the comparison, I guess, with how we're actually going to use it to build this 01:54.840 --> 01:55.140 app. 01:55.140 --> 02:02.480 And if we take a look at the get started inside here, then what the makers of Redux suggest nowadays 02:02.510 --> 02:09.950 is not to use Redux, how we used to use it, because they found that developers had a hard time not 02:09.980 --> 02:15.980 introducing bugs into their applications by using Redux, because it's very strict on how we use it, 02:16.010 --> 02:23.180 especially with things like pure functions, not using complex objects in our states and other elements. 02:23.180 --> 02:27.830 Developers sometimes had trouble with Redux, so what they did is they created this thing called a Redux 02:27.830 --> 02:33.440 toolkit, and that's their recommended approach for writing Redux logic. 02:33.440 --> 02:36.110 So we're going to be using that, but not straight away. 02:36.110 --> 02:41.630 We're just going to use Redux Core if you like, and just have a little look at how Redux used to be 02:41.630 --> 02:43.670 used in our application. 02:43.790 --> 02:46.010 Now, Redux is not specific to react. 02:46.010 --> 02:48.290 It's very often used with react. 02:48.290 --> 02:54.380 But if we want this to or if we want our react components to use this state, then we can use another 02:54.380 --> 02:58.610 package as well as the Redux core and the Redux toolkit. 02:58.610 --> 03:03.090 We can use React Redux, which are the official react bindings for react. 03:03.090 --> 03:06.360 And this is just something else that we're going to install at the same time. 03:06.360 --> 03:13.740 And what this will give us is a couple of hooks that we can utilize that allow us to select data or 03:13.740 --> 03:24.510 state from our Redux stores, and also a dispatch hook that allows us to dispatch changes to the state 03:24.510 --> 03:25.620 in those stores. 03:25.650 --> 03:31.050 And we'll be using both of those hooks as well, so that we can update state from our component and 03:31.050 --> 03:34.440 read the global state from our components as well. 03:34.440 --> 03:38.670 So let's take a look at getting started and the installation here. 03:38.700 --> 03:43.080 We just need to use npm install redux js toolkit. 03:43.080 --> 03:43.860 Let's do this one. 03:43.860 --> 03:50.160 First of all, because we shouldn't get a problem with the version of react we're using if you're using 03:50.160 --> 03:52.830 the release candidates of react. 03:52.830 --> 03:54.270 But we may do anyway. 03:54.270 --> 03:57.570 And we may always have to do this when using. 03:57.600 --> 03:58.680 Yeah we do okay. 03:58.710 --> 04:05.280 So we're going to need to use the legacy peer dependencies again because of the release candidate nature 04:05.280 --> 04:06.240 of react. 04:06.270 --> 04:11.610 When react 19 is fully released, then this shouldn't be necessary. 04:11.610 --> 04:12.630 And I mentioned it before. 04:12.630 --> 04:16.830 It's just a consequence of using something that's not released stably yet. 04:16.860 --> 04:20.130 This is just something that we're going to have to accommodate. 04:20.130 --> 04:24.480 So I'm just going to specify a legacy peer deps and press return. 04:24.480 --> 04:27.180 And this should install successfully now. 04:27.210 --> 04:30.780 And as I mentioned we're also going to need the React Redux package. 04:30.780 --> 04:35.490 So if we take a look at what we need for this can I find the installation? 04:35.520 --> 04:36.690 Yes I can. 04:36.690 --> 04:40.140 And we want to add this to an existing app. 04:40.260 --> 04:44.460 So we just need npm install react redux as well. 04:44.460 --> 04:49.920 And I have little doubt that we will also need the legacy peer dependencies here as well. 04:49.920 --> 04:53.670 So I'm just going to also add this switch to this one. 04:53.700 --> 04:54.240 Great. 04:54.270 --> 04:56.190 Now we've got both of them installed. 04:56.190 --> 05:01.320 So we'll start off as simply as possible with Redux because it can be. 05:01.560 --> 05:04.080 If it's the first time you're encountering it. 05:04.110 --> 05:11.640 It can seem a bit confusing at first, but we're going to start really simply and just show how to read 05:11.640 --> 05:15.600 some data from a global store in one of our components. 05:15.960 --> 05:25.530 So inside the let's see inside the features folder, we'll use our contact page for Redux testing. 05:25.530 --> 05:33.660 And the way that I am going to demonstrate this stuff is we're going to have little Redux stores inside 05:33.660 --> 05:34.170 a feature. 05:34.170 --> 05:39.120 So this contact is just going to be used as a store for a counter. 05:39.120 --> 05:46.410 So we're going to have a dedicated little store or a slice in Redux terminology for contacts related 05:46.410 --> 05:47.040 states. 05:47.040 --> 05:48.600 Or really it's just going to be a counter. 05:48.600 --> 05:55.560 So I'm just going to create a new file inside here and I'm going to call it counter reducer dot ts. 05:55.890 --> 06:00.590 And inside here let's create the code for a Redux store. 06:00.590 --> 06:03.110 So I'm going to say export interface. 06:03.290 --> 06:08.690 Or let's stick with type because I've been using type earlier on and I'm going to call it counter state. 06:08.720 --> 06:11.240 This is the state we're going to use for our counter. 06:11.240 --> 06:17.420 And I'm going to give it just one property called data that's going to contain a number. 06:17.690 --> 06:19.370 Then we'll create some initial state. 06:19.400 --> 06:22.280 What are we going to set this data to. 06:22.310 --> 06:25.190 Initially when our application first loads. 06:25.190 --> 06:31.220 And this is going to use the type of counter state and I'll say equals open curly brackets. 06:31.220 --> 06:38.210 And I'm going to set the data property to the answer to the ultimate question of life, the universe 06:38.210 --> 06:42.200 and everything, which of course is 42. 06:42.230 --> 06:44.780 And that's a reference to quite an old book. 06:44.780 --> 06:47.300 Now, The Hitchhiker's Guide to the Galaxy. 06:47.300 --> 06:53.420 And then we're going to export our function, the reducer function. 06:53.420 --> 06:58.970 So I'm going to say export default function, call it counter reducer. 06:58.980 --> 07:03.060 And we're going to pass in as an argument our states. 07:03.120 --> 07:07.830 And I'm going to set this equal to the initial state that we created above. 07:07.860 --> 07:11.820 And then open curly brackets for the function body. 07:12.240 --> 07:17.430 And all we're going to do right now is we're simply going to return the state and to reduce the function. 07:17.430 --> 07:23.460 Really it's a function that takes some state and it can take an action as well. 07:23.460 --> 07:26.520 And it returns new state based on the action. 07:26.550 --> 07:32.040 It kind of acts like a decision maker that decides how the state should change when something happens 07:32.040 --> 07:37.020 in our application without directly modifying the existing state. 07:37.050 --> 07:41.550 So it's not doing very much at the moment, but what it's going to return to us is the state, which 07:41.550 --> 07:44.940 contains a data property which is set to 42. 07:44.970 --> 07:49.710 Now, in order to use Redux in our application, we need to configure a store. 07:49.740 --> 07:54.540 So inside the app folder I'm going to create a new folder. 07:54.540 --> 07:56.280 And I'm going to call it store. 07:56.310 --> 08:01.580 Inside here I'm going to create a new file and just call it store TS. 08:01.640 --> 08:07.610 And inside here we're going to use a Redux function to create the store. 08:07.640 --> 08:14.270 So I'm going to export a function and I'm going to call it configure store. 08:14.390 --> 08:17.480 And in fact no I'm not I'm going to call it configure store. 08:17.480 --> 08:23.720 Because when we come to use Redux Toolkit that's a function they actually provide for us now. 08:23.750 --> 08:26.600 Whereas previously we'd need to create this stuff manually. 08:26.600 --> 08:29.750 So I'm just going to create this function called configure the store. 08:29.750 --> 08:32.990 And I'm going to return Create Store. 08:33.200 --> 08:35.780 And this has actually been deprecated. 08:35.780 --> 08:39.590 Now they really don't want us to use this approach anymore. 08:39.620 --> 08:44.300 And if we take a look at this then I think there's a legacy version of this that we can use without 08:44.300 --> 08:46.310 getting a warning. 08:46.310 --> 08:49.580 So yeah, we can use legacy create store instead. 08:49.580 --> 08:55.160 So they're very keen on developers not using this approach for Redux anymore. 08:55.190 --> 08:57.800 I am just giving this small demonstration regardless. 08:57.800 --> 09:04.980 And this creates store is never going to be removed, but they've marked it as deprecated. 09:04.980 --> 09:09.210 So it's really in our faces saying, hey, don't do it this way, we've got a better way. 09:09.240 --> 09:11.790 Now use Redux Toolkit, which we will use soon. 09:11.910 --> 09:16.680 So instead of using Createstore, I'm just going to use legacy Createstore. 09:16.710 --> 09:20.250 So it's very clear that, hey, we shouldn't really be using this anymore. 09:20.250 --> 09:25.710 And I'm going to pass in the counter reducer, which is the reducer that we have just created as its 09:25.710 --> 09:29.880 argument, and I'll remove the one that we're not using at the top. 09:29.880 --> 09:35.070 Now, in order for us to use this with our react components, we need to use something so that our store 09:35.100 --> 09:37.500 is provided to our application. 09:37.500 --> 09:39.960 So we're going to go back to our application entry point. 09:40.020 --> 09:41.520 That's the main TSX. 09:41.520 --> 09:47.280 And inside here we're going to provide our store to our application. 09:47.280 --> 09:51.270 So just inside strict mode I'm going to have the left angle bracket. 09:51.270 --> 09:55.200 And we're going to use the provider which we get from React Redux. 09:55.200 --> 10:00.850 This provides us with our Redux bindings to our react application and add the closing tag. 10:00.880 --> 10:05.530 I'm going to cut the router provider and put it inside the provider. 10:05.530 --> 10:10.930 And our provider needs a property, a store or a property called store. 10:10.930 --> 10:17.890 And we're going to set it to store, which is what we created or which we don't have yet. 10:17.890 --> 10:19.360 I need to create a variable for this. 10:19.360 --> 10:23.650 So just above the create routes I'm going to say const store equals. 10:23.830 --> 10:28.930 And then I'm going to use the configure the store method, the one that we've created not configure 10:28.930 --> 10:31.930 store which comes from Redux Toolkit. 10:32.020 --> 10:36.820 And then we pass this to our provider. 10:36.850 --> 10:43.450 Now if we take a look at what we get from store, if I press or type in store followed by a period, 10:43.480 --> 10:47.230 we can see that we've got some things that we can do with this. 10:47.260 --> 10:49.960 What's returned from the configure store method? 10:50.050 --> 10:53.380 We can dispatch an action from here if we wanted to. 10:53.410 --> 10:57.010 We can get state, replace reducer or subscribe. 10:57.010 --> 11:04.470 But let's take a look at get getstate and we'll just log out and say console.log and we'll say store 11:04.470 --> 11:06.420 and get state. 11:06.420 --> 11:13.590 And what this will return to us is the contents of what's currently residing in our Redux store. 11:13.590 --> 11:20.490 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 11:20.490 --> 11:23.550 go to the console, we can see that we're outputting an object. 11:23.580 --> 11:26.550 This is on main TSX line 15. 11:26.550 --> 11:30.870 And if we expand the object we can see that we've got data 42. 11:31.020 --> 11:31.980 Great. 11:31.980 --> 11:35.280 So that proves that we can get stuff from our store. 11:35.280 --> 11:36.870 And there's one final example. 11:36.870 --> 11:39.210 Let's go to our contact page. 11:39.210 --> 11:44.940 And inside here let's just display what we've got in our Redux store inside here. 11:44.970 --> 11:49.710 Now the way that we do that is I'll say const data. 11:49.770 --> 11:53.820 And then we can make use of one of those hooks that we get from React Redux. 11:53.820 --> 11:58.660 And we're going to use the selector or the hook is called use selector. 11:58.660 --> 12:02.710 And that's going to give us access to our Redux state. 12:02.710 --> 12:09.490 So I'll use the use selector hook that we get from React Redux open parentheses. 12:09.490 --> 12:12.280 And then we need to tell it what state we're looking for. 12:12.280 --> 12:17.110 So inside here because we don't have great TypeScript usage at the moment I'm just going to specify 12:17.140 --> 12:17.800 state. 12:17.800 --> 12:21.640 And then I'm going to bring in the counter state from the react reducer. 12:21.640 --> 12:25.060 Because that's what we're looking to get from our store. 12:25.090 --> 12:30.940 Then we add an arrow and I'm going to say I'm going to go out and get state dot data. 12:31.030 --> 12:36.130 And then this data will represent that number 42. 12:36.160 --> 12:39.730 So let's do something in our contact page to display this. 12:39.730 --> 12:43.240 So I'll open up a fragment and we'll use typography. 12:43.510 --> 12:47.440 And we'll specify a variant of H2. 12:47.440 --> 12:52.000 And I'm just going to specify a title for the page and call it contact page. 12:52.420 --> 12:54.670 Even though it's not really going to be a contact page. 12:54.670 --> 12:57.820 And I'll then specify typography again. 12:57.960 --> 12:59.940 And this is going to have a variant. 12:59.940 --> 13:01.770 And we'll just say body one. 13:01.830 --> 13:05.640 Inside here we'll say the data is colon. 13:05.640 --> 13:09.780 And then in curly brackets we can specify data. 13:09.810 --> 13:15.300 Now if we go and take a look at our progress and I've got a little console open again I must remember 13:15.300 --> 13:18.600 to close this because it's always quite scary when we see so many warnings. 13:18.600 --> 13:19.650 But that's fine. 13:19.920 --> 13:25.740 And if we go to the contact page, then we can see that we're getting the data from our Redux store. 13:25.740 --> 13:32.700 So we have the ability to anywhere in our application, we can use that hook in any react component, 13:32.700 --> 13:35.160 and we can go and get that data from a store. 13:35.190 --> 13:40.380 But obviously that's not particularly helpful because it doesn't do anything. 13:40.380 --> 13:47.790 So what we'll take a look at next is Redux Actions and how we can dispatch actions to update the states 13:47.790 --> 13:49.530 in our global state. 13:49.530 --> 13:56.280 And when that state is updated, that will cause our component to rerender and display the updated states. 13:56.280 --> 13:58.560 And we'll take a look at that next.