1 00:00:00,360 --> 00:00:06,570 And once our buttons are in place now, it's actually add the functionality, and this is the case where 2 00:00:06,570 --> 00:00:08,490 we'll have to add one more action. 3 00:00:08,820 --> 00:00:10,380 Now this will be our last action. 4 00:00:10,970 --> 00:00:13,650 And the name will be change page. 5 00:00:14,100 --> 00:00:16,710 Then in the app context, of course we'll import. 6 00:00:17,160 --> 00:00:22,620 And let's set up the function where in the functional parts, in the page. 7 00:00:23,250 --> 00:00:29,790 So we'll use this function to places we use it where we have the buttons in the button controller. 8 00:00:30,120 --> 00:00:36,450 And you can probably already guess that since each value represents the page, that's the one that will 9 00:00:36,450 --> 00:00:37,980 pass into the function. 10 00:00:38,340 --> 00:00:44,490 And then when it comes to preview next, we'll have to do a little bit of logic before done before we 11 00:00:44,490 --> 00:00:49,620 can pass in that page, but both will use the same thing and then we'll dispatch Change Page. 12 00:00:49,900 --> 00:00:54,960 And as far as the payload will pass in the page, that's coming in as a parameter. 13 00:00:55,770 --> 00:00:58,110 Now we do want to add this one to the value. 14 00:00:58,140 --> 00:01:01,190 So we on export and not the same thing and reducer. 15 00:01:01,290 --> 00:01:10,830 We grab change bench action and then we will look for this type and we'll just set the page in the state 16 00:01:10,830 --> 00:01:19,580 equal to whatever value is passed in and then the variant in the page button, the container, let's 17 00:01:19,590 --> 00:01:20,630 grab the function. 18 00:01:21,060 --> 00:01:26,670 And then for time being again, let's not worry about the premium next, even though those owners will 19 00:01:26,680 --> 00:01:27,420 use it as well. 20 00:01:28,200 --> 00:01:32,100 For now, I just want to go to the buttons in my button container. 21 00:01:32,460 --> 00:01:39,450 I'm then for all of them instead of, look, let's pass in the page number again, which is going to 22 00:01:39,450 --> 00:01:42,570 represent that page in the array. 23 00:01:42,960 --> 00:01:47,640 So let's start, I guess, with the app context or, you know, no actions. 24 00:01:48,030 --> 00:01:48,760 Let's go here. 25 00:01:49,040 --> 00:01:51,990 Let's say that we're looking for change page. 26 00:01:52,450 --> 00:01:57,990 So let me grab this one over here late and then let's write change. 27 00:01:59,350 --> 00:02:05,950 And on the score page, it's service one, none less important in both places right away. 28 00:02:06,430 --> 00:02:08,169 So let's start with the producer, I guess. 29 00:02:09,229 --> 00:02:13,890 We're here, and we'll do the same thing in the context of copy and paste. 30 00:02:14,550 --> 00:02:16,950 Let's go back to the Arab context. 31 00:02:17,590 --> 00:02:18,600 Now get over here. 32 00:02:19,050 --> 00:02:19,920 Copy and paste. 33 00:02:20,280 --> 00:02:21,690 Now let's set up the function. 34 00:02:22,290 --> 00:02:26,820 Now I guess it's going to be all the way down here, by the way, filters. 35 00:02:27,010 --> 00:02:29,850 It's a constant change and and page. 36 00:02:29,880 --> 00:02:32,790 Like I said, it's going to be looking for that particular page. 37 00:02:32,790 --> 00:02:38,640 Value on the dispatch tape will be equal to a change page. 38 00:02:39,090 --> 00:02:44,730 And let's go with payload, which is going to be equal to an object and then will pass in the Page one 39 00:02:45,090 --> 00:02:47,790 service and not in the reducer. 40 00:02:48,180 --> 00:02:51,950 Let's navigate somewhere here and line. 41 00:02:52,530 --> 00:02:54,090 I mean, I don't want to copy and paste. 42 00:02:54,090 --> 00:02:56,760 You know, it's going to be faster if I just go with action. 43 00:02:56,760 --> 00:03:01,140 Type is equal to change page. 44 00:03:01,500 --> 00:03:05,550 And and here simply want to go with return to that state. 45 00:03:06,150 --> 00:03:11,730 I'll let you just set the state page value equal to action payload page. 46 00:03:11,730 --> 00:03:16,170 So Page is equal to action, payload and on page. 47 00:03:16,500 --> 00:03:20,340 Now I did forget something in the app context where I do need to pass this down. 48 00:03:20,640 --> 00:03:26,670 So let's go to our value what's passed in the change page function as well. 49 00:03:27,120 --> 00:03:30,570 And then the last step in the page button container. 50 00:03:30,930 --> 00:03:32,340 So let's navigate over here. 51 00:03:32,730 --> 00:03:37,160 First, let's grab the function change page I believe I'm on. 52 00:03:37,170 --> 00:03:38,220 Let's keep on scrolling. 53 00:03:38,490 --> 00:03:46,830 Like I said, this will be passed in as that page, so that will be displayed here instead of the button. 54 00:03:47,200 --> 00:03:55,080 And also, this is the same thing that will pass in into our change page because we are setting this 55 00:03:55,830 --> 00:04:00,240 as an array and then each item will represent that page. 56 00:04:00,750 --> 00:04:03,360 So let's go where we have the console.log with remove it. 57 00:04:03,820 --> 00:04:09,430 I would just simply say change page and then it's passing the page number. 58 00:04:09,780 --> 00:04:10,620 Let's say that. 59 00:04:10,920 --> 00:04:14,790 And again, we're not going to be triggering anything as far as the request. 60 00:04:15,360 --> 00:04:19,260 We'll do that right after we set up the previous next time being. 61 00:04:19,260 --> 00:04:24,600 I just want to showcase that right now and the state will actually change that value. 62 00:04:25,170 --> 00:04:27,600 So if I find my page somewhere. 63 00:04:28,260 --> 00:04:32,520 Check it out every time or click, I actually will change. 64 00:04:33,160 --> 00:04:39,720 And if you have the same setup now, I can start doing the same thing with preve and next.