1 00:00:09,620 --> 00:00:10,850 In this video. 2 00:00:10,880 --> 00:00:16,880 Let's talk about another hook and that is use reducer. 3 00:00:17,540 --> 00:00:21,860 Use reducer in combination with create context. 4 00:00:21,890 --> 00:00:27,780 It can help us to create large applications for context API. 5 00:00:27,800 --> 00:00:38,600 We can pass in functions or event handler, but with risk reducer it can help us to trigger an event 6 00:00:38,600 --> 00:00:42,490 that can cause a change to the global state. 7 00:00:42,500 --> 00:00:46,820 So any component that have that particular state. 8 00:00:46,850 --> 00:00:55,000 I'm going to have the updated data and use reducer works the same way as Redux. 9 00:00:55,010 --> 00:01:00,890 So if you want to understand Redux, you need to be familiar with use reducer. 10 00:01:00,920 --> 00:01:04,120 If you know Redux, then use reducer. 11 00:01:04,129 --> 00:01:06,650 It won't be easy for you to understand. 12 00:01:07,270 --> 00:01:16,330 So let's say that this is the source of our application data and it is not part of our component. 13 00:01:16,330 --> 00:01:18,430 It is on a different file. 14 00:01:18,610 --> 00:01:26,770 So let's say that this is our component where we want to add to do to our data source here. 15 00:01:27,010 --> 00:01:36,400 And since this component and this data source are not related, how can we trigger an event to add data 16 00:01:36,400 --> 00:01:38,890 into this array of to dos? 17 00:01:38,920 --> 00:01:42,950 That is why use reducer comes into play. 18 00:01:42,970 --> 00:01:44,740 So let's look at the flow. 19 00:01:45,550 --> 00:01:52,630 So as soon as the user click on the add to do, we have what is called dispatch. 20 00:01:52,660 --> 00:01:57,430 So it's going to call a function called dispatch. 21 00:01:57,430 --> 00:02:01,990 And this dispatch, we can get it from the use reducer. 22 00:02:02,200 --> 00:02:10,449 And this dispatch is going to contain what is called payload or the action object. 23 00:02:10,539 --> 00:02:20,080 So the action object is the data that the user is trying to submit, and then the dispatch will take 24 00:02:20,080 --> 00:02:24,340 that data and then send it to different place. 25 00:02:24,340 --> 00:02:28,150 So let's see where this data is going to send to. 26 00:02:28,360 --> 00:02:32,740 Next is a row pass to what is called reducer. 27 00:02:32,770 --> 00:02:39,850 So reducer is a function that is going to make changes to the original data. 28 00:02:40,150 --> 00:02:49,300 So I regard reducer as a state changer because it's making changes to this original data. 29 00:02:49,480 --> 00:02:56,950 But before the reducer can make changes to this data, we have what is called action type. 30 00:02:56,980 --> 00:03:02,260 Meaning what kind of action do you want this reducer to take? 31 00:03:02,440 --> 00:03:11,320 So the dispatch function will come with a type of an action and then we are going to implement that 32 00:03:11,320 --> 00:03:20,560 logic inside the reducer, the reducer, the action type which has a payload of to do or title call 33 00:03:20,560 --> 00:03:30,490 study, want to add data into the array of to dos or we won't remove a data from the original array. 34 00:03:30,520 --> 00:03:37,600 So always the reducer is going to look up the type of action that is coming in. 35 00:03:37,780 --> 00:03:44,950 So if the reducer has the same action type, then it's going to make changes to the original array. 36 00:03:45,130 --> 00:03:52,690 And as soon as it makes changes, it's going to render a component, and then the original data will 37 00:03:52,690 --> 00:03:54,640 be sent to the component. 38 00:03:54,760 --> 00:04:03,190 So it can see that the to do component now has the new to dos before there is no to do it here. 39 00:04:03,190 --> 00:04:09,940 And after adding we can also fetch the updated to do so in the next video. 40 00:04:09,940 --> 00:04:10,720 Let's see it. 41 00:04:10,720 --> 00:04:16,480 Record how we are going to implement this by building to do application.