WEBVTT 00:00.000 --> 00:00.390 Okay. 00:00.390 --> 00:01.890 Welcome to section five. 00:01.890 --> 00:08.940 And in this section we're going to be focusing mostly on Redux a tool to manage global states in our 00:08.940 --> 00:10.260 react application. 00:10.260 --> 00:12.720 And Redux is a super popular tool to do this. 00:12.750 --> 00:18.330 It's not just for react, it is for other libraries and frameworks as well. 00:18.330 --> 00:23.040 But of course we're going to be using this with our react application. 00:23.040 --> 00:28.380 So coming up in this section then we are of course going to be taking a look at Redux, but also how 00:28.380 --> 00:33.060 we bind this and make it usable in our react application. 00:33.060 --> 00:39.690 To do that we add another package called React Redux which provides the bindings for Redux. 00:39.690 --> 00:43.830 And we're also going to take a look at using Redux Toolkit. 00:43.860 --> 00:51.060 Now, the makers of Redux discovered that many developers were introducing bugs into their applications 00:51.060 --> 00:58.830 because they didn't follow the very strict rules of using Redux, and Redux toolkit was created to help 00:58.830 --> 01:03.720 reduce the number of mistakes that developers make, And also it does a great job of reducing the amount 01:03.720 --> 01:09.270 of boilerplate that we have inside our code when we use a tool like Redux as well. 01:09.300 --> 01:13.140 Also, in this section, we're going to take a look at Redux Toolkit query. 01:13.140 --> 01:17.670 This is the tool that we're going to use for data fetching in our application, as it gives us a lot 01:17.670 --> 01:21.030 more power and flexibility than a simple fetch does. 01:21.120 --> 01:26.070 And it also solves some problems that we have as developers when it comes to data fetching. 01:26.070 --> 01:30.780 Things like how are we going to handle caching, how are we going to handle loading, and how are we 01:30.810 --> 01:32.550 going to handle errors. 01:32.550 --> 01:40.890 And Redux toolkit query solves all of these problems for us, and greatly reduces the boilerplate kind 01:40.890 --> 01:44.220 of code that we would need to write to achieve that functionality. 01:44.220 --> 01:46.770 So we're going to be taking a look at that as well. 01:46.770 --> 01:52.650 And we're also going to take a look at one of the best developer tools out there, which is Redux DevTools 01:52.650 --> 01:53.790 in this section. 01:53.790 --> 01:58.110 But first of all, we need to answer the question, what is Redux? 01:58.110 --> 02:03.800 Well, it's a store for our application, kind of like a database, if you will. 02:03.830 --> 02:12.140 Specifically for our client side application states, and this states that we store in our Redux store 02:12.170 --> 02:16.370 is accessible across our entire react application. 02:16.610 --> 02:25.040 Any component in any location will be able to access and update the values inside that Redux store. 02:26.180 --> 02:33.680 So this removes any need for prop drilling in our application, because we can simply access and store 02:33.710 --> 02:36.080 values in a global store. 02:36.320 --> 02:42.980 Now we can only have one Redux store per application, but we can organize ourselves by splitting it 02:42.980 --> 02:44.630 into slices. 02:44.630 --> 02:51.380 So we'll have things like a catalog slice, a basket slice and an order slice, and we'll just create 02:51.380 --> 02:56.870 slices as and when we need to, which makes sense structurally in our application. 02:56.870 --> 03:02.300 We're also going to take a look at using React Redux to be able to provide Redux to our application. 03:02.300 --> 03:10.610 And what this provides for us is a provider, so we can provide effectively our Redux store to our react 03:10.640 --> 03:11.780 application. 03:11.780 --> 03:16.730 And this also provides us with some hooks that we can use to access and update the store. 03:16.730 --> 03:20.000 Specifically for accessing and reading from the store. 03:20.000 --> 03:26.540 We're given a use selector hook, and this allows us to access the store and display the value inside 03:26.540 --> 03:27.860 our components. 03:28.310 --> 03:34.460 Now, if that value that we're using inside our component is updated by this component or another component, 03:34.490 --> 03:40.100 then our component will be aware of that change and it will cause the component to rerender with the 03:40.100 --> 03:44.540 updated value so that updated value displays in the user's browser. 03:44.570 --> 03:50.060 Also, we can update the store from anywhere in our application, as we're also provided with a use 03:50.060 --> 03:58.310 dispatch hook, and this allows us to dispatch actions to our store, which will then update the value 03:58.310 --> 04:04.380 in that store and any components that are effectively listening to that value that will cause that component 04:04.380 --> 04:10.020 to be updated, and it will cause it to rerender and display the outputs in the user's browser. 04:10.170 --> 04:14.670 So let's take a look at Redux Flow before we get our hands dirty with using this. 04:14.670 --> 04:22.080 Because when we do use the Redux toolkit, then a lot of the flow, if you like, is abstracted away 04:22.080 --> 04:22.770 from us. 04:22.770 --> 04:25.800 So we don't really see it so clearly in our code anymore. 04:25.800 --> 04:33.000 But we will take a look in the early part of this section at using Redux natively, without using Redux 04:33.000 --> 04:37.410 Toolkit, just to have an understanding of how Redux works. 04:37.410 --> 04:44.310 But just to give you an idea of the general Redux flow when things happen, then if we take this example, 04:44.310 --> 04:50.550 we've got a very simple Redux store with a value of count set to be equal to one, and then we're displaying 04:50.550 --> 04:53.520 that value in a component in our react application. 04:53.550 --> 05:00.960 Now, if a user was to click an increment button to update the count to two, then we need to notify 05:00.960 --> 05:01.620 our store. 05:01.620 --> 05:08.500 So we would dispatch an action to a reducer, which then would update our Redux store value. 05:08.530 --> 05:16.660 From there we go via the provider and then to our react application, which then notifies our component 05:16.660 --> 05:20.800 that that value has been updated and cause that component to rerender. 05:21.010 --> 05:22.270 So what is a reducer then? 05:22.300 --> 05:25.090 That's new and I haven't mentioned that yet. 05:25.330 --> 05:29.290 And a reducer in Redux is a pure function. 05:29.290 --> 05:38.050 It takes the current state and an action as arguments, and it returns a new state based on that action 05:38.140 --> 05:41.230 without modifying the original state. 05:41.230 --> 05:48.910 And the name reducer comes from the concept of functional programming, where an array of values is 05:48.910 --> 05:51.040 reduced to a single output. 05:51.070 --> 05:58.480 So in Redux, the reducer reduces multiple actions over time into a single state object, which represents 05:58.480 --> 06:01.090 the current state of our application. 06:01.090 --> 06:06.670 So there are some best practices associated with this, but when we use Redux Toolkit, we don't need 06:06.670 --> 06:09.040 to think about these so deeply. 06:09.040 --> 06:14.560 If we were just using Redux without a toolkit, then these become essential to know and understand. 06:14.560 --> 06:19.240 But when we're using the toolkit, a lot of these are taken care of for us. 06:19.300 --> 06:23.740 So, for example, a best practice is to not mutate the state. 06:23.740 --> 06:28.960 Whenever we want our state to be updated, we create effectively a clone of that state, update that 06:28.960 --> 06:34.240 clone, and then replace the state with the clone that we've just updated. 06:34.330 --> 06:40.510 We would never mutate the state directly, and if we did, we can cause bugs in our application. 06:40.540 --> 06:45.160 Another best practice is that reducers must not have side effects. 06:45.340 --> 06:46.870 When we're updating the store. 06:46.870 --> 06:51.580 We can't go off to our API, get a different value, and then bring that back and then use that to update 06:51.580 --> 06:52.900 another part of our store. 06:52.930 --> 06:55.420 So reducers must not have side effects. 06:55.420 --> 06:59.920 But there are times, of course, where we're going to want to go out to our API to get some data to 06:59.950 --> 07:04.670 populate into our store, and that's something to think about, but it's not something we're going to 07:04.670 --> 07:11.300 think about until we come to RTK query, which is a tool designed specifically to handle that scenario 07:11.300 --> 07:11.600 also. 07:11.630 --> 07:16.430 We must not have non serializable values in our state or actions. 07:16.460 --> 07:19.340 I'll accidentally demonstrate what happens when we do that. 07:19.370 --> 07:23.630 At some point during this training course because I did make a mistake somewhere along the lines. 07:23.630 --> 07:29.360 But when we do do something that's outside of best practice, we do get warnings about this. 07:29.360 --> 07:32.090 So it's not something that's easy to make happen. 07:32.090 --> 07:35.690 So keep an eye out for that and see if you can spot it before I do. 07:35.720 --> 07:37.730 When we do come across that. 07:37.730 --> 07:43.280 But I promise you, if you do come across that, we will resolve it before the end of this section or 07:43.280 --> 07:45.680 when it's noticed in our app. 07:45.680 --> 07:51.320 And we can also only have one store per app, which is fine because we can split that store up into 07:51.320 --> 07:52.850 multiple slices. 07:52.850 --> 07:58.010 So as mentioned, we don't need to worry so much about these best practices because we're going to be 07:58.010 --> 08:04.260 using the Redux toolkit, a utility made by the makers of Redux to help us out when using Redux so that 08:04.260 --> 08:06.330 we don't introduce bugs into our application. 08:06.330 --> 08:12.480 But there's many good reasons to use this, and it is a best practice, by the way, to use Redux Toolkit 08:12.480 --> 08:14.520 when we're using Redux. 08:14.520 --> 08:18.630 So this gives us opinionated code effectively. 08:18.660 --> 08:23.490 Redux was never opinionated, but it had very strict rules about how we could use it. 08:23.520 --> 08:28.020 Redux toolkit is opinionated on how we structure and use Redux. 08:28.020 --> 08:34.500 Also, it provides sensible defaults for store setup, and effectively we can create our store just 08:34.500 --> 08:39.990 using one line of code using this, because the defaults that it uses are the ones that we would want 08:39.990 --> 08:41.370 to use anyway. 08:41.580 --> 08:44.670 It also includes commonly used add ons built in. 08:44.670 --> 08:49.560 I mentioned the Redux dev tools, which are excellent, and previously they would be something that 08:49.560 --> 08:53.400 we would need to add to our project, but now they're built in to Redux Toolkit. 08:53.400 --> 08:55.320 So again, we don't need to worry about that. 08:55.320 --> 09:02.940 And when it comes to using things like RTK query, that's also built into the toolkit as well. 09:03.130 --> 09:05.860 And also it helps us to simplify our code. 09:05.890 --> 09:10.450 And one of the best practices that we mentioned was that we're not allowed to mutate our state, but 09:10.450 --> 09:17.050 we're going to be what appears to be mutating state when we use the Redux toolkit, because it comes 09:17.050 --> 09:22.390 with a library called IMA that allows us to write code that appears to mutate the state directly, but 09:22.390 --> 09:28.810 under the hood, it ensures the state remains immutable as it will wrap our state, changes in a proxy 09:28.810 --> 09:33.400 object, and create a new, immutable copy of the state based on those changes. 09:33.430 --> 09:38.530 Again, it's something that happens in the background without us seeing it take place, but it does 09:38.530 --> 09:41.980 simplify our code, which of course we benefit from. 09:42.010 --> 09:48.400 And another thing that Redux Toolkit gives us or takes away from us is boilerplate code. 09:48.400 --> 09:55.240 We write less boilerplate code than we would do if we were using Redux natively, and we'll take a quick 09:55.240 --> 10:00.550 look at using Redux without the Redux toolkit first, just so we get an understanding of Redux, and 10:00.550 --> 10:02.440 you'll see what I mean by boilerplate. 10:02.470 --> 10:04.390 So let's begin.