1 00:00:00,650 --> 00:00:00,950 All right. 2 00:00:00,950 --> 00:00:06,080 My friends in this video we're gonna start to refactor our blog provider to use the use reducer hook. 3 00:00:06,080 --> 00:00:09,690 I'm going to first begin by giving you a quick reminder on how that thing works. 4 00:00:09,720 --> 00:00:15,000 So I pulled on the screen here when a previous project that we worked on called the Counter screen component. 5 00:00:15,000 --> 00:00:20,450 So inside of our counter screen we had a use reducer call right here and we had two buttons that we 6 00:00:20,450 --> 00:00:21,080 displayed. 7 00:00:21,110 --> 00:00:26,320 So two ways in which we could change our state anytime a user tapped on one of these two buttons. 8 00:00:26,360 --> 00:00:32,360 We dispatched in action remember an action is an object that describes how we want to change our current 9 00:00:32,360 --> 00:00:33,620 state variable. 10 00:00:33,620 --> 00:00:38,360 So in this case right here we dispatched an action with a type of increment and we all set a payload 11 00:00:38,360 --> 00:00:44,370 property on there as well that described how much we wanted to increment our counter by whenever a user 12 00:00:44,370 --> 00:00:45,240 typed on decreased. 13 00:00:45,240 --> 00:00:49,920 We had a type of decrement and we had also a payload property that described how much we wanted to change 14 00:00:49,920 --> 00:00:51,420 the counter by as well. 15 00:00:51,420 --> 00:00:56,100 So whenever we want to make a change to our state we always call that dispatch function and we always 16 00:00:56,100 --> 00:00:57,900 passed in an object. 17 00:00:57,900 --> 00:00:59,420 Remember this object right here. 18 00:00:59,430 --> 00:01:02,490 It could have any property we wanted to have on it. 19 00:01:02,490 --> 00:01:07,260 But I told you specifically that community convention is to have a type property that describes how 20 00:01:07,260 --> 00:01:12,300 we're trying to change our state and a payload that has some information related to exactly what we're 21 00:01:12,300 --> 00:01:15,090 trying to change. 22 00:01:15,130 --> 00:01:20,410 We then also created our reducer function the reducer function would be called automatically by react 23 00:01:20,980 --> 00:01:23,350 the first argument would be our state variable. 24 00:01:23,350 --> 00:01:27,850 So in our case for this list of blog posts our state variable is probably going to be an array of blog 25 00:01:27,850 --> 00:01:28,860 posts. 26 00:01:28,900 --> 00:01:33,250 Then the second argument was gonna be the action object that we had previously dispatch like the one 27 00:01:33,250 --> 00:01:38,840 we were just talking about right there so inside of our reducer function we set up a switch statement 28 00:01:39,430 --> 00:01:44,780 and we took a look at what the actions type was and an inside of each of these different cases we had 29 00:01:44,870 --> 00:01:49,580 added in a little bit of code to update our state in some very particular way. 30 00:01:49,760 --> 00:01:54,920 And then remember the key to the reducer function was that no matter what we always returned a new value 31 00:01:54,980 --> 00:01:57,940 to be used as our state object OK. 32 00:01:57,970 --> 00:02:00,730 So that's a quick reminder on how use reducer works. 33 00:02:00,730 --> 00:02:04,540 So now with that in mind let's start to update our blog context file. 34 00:02:04,540 --> 00:02:08,760 We're gonna make sure that we use the use reducer thing instead of you state. 35 00:02:08,980 --> 00:02:14,380 So to get started inside a blog context I'm going to first change the you state import to use reducer 36 00:02:14,440 --> 00:02:21,010 instead then write above my function my blog provider right here I'm going to create a new function 37 00:02:21,730 --> 00:02:28,330 called simply about like blog reducer let's give it a meaningful name that's gonna be my reducer function 38 00:02:29,950 --> 00:02:33,910 will add in some code to that in just a minute but let's first update our blog provider. 39 00:02:33,910 --> 00:02:40,890 So inside my blog provider I'm going to update the you state call to instead be used reducer and then 40 00:02:40,890 --> 00:02:43,910 remember the first argument is going to be the reducer to use. 41 00:02:43,920 --> 00:02:51,780 So that's blog producer for us and then the second argument will be our initial state object in this 42 00:02:51,780 --> 00:02:53,190 case we're going to leave it as an array. 43 00:02:53,220 --> 00:02:59,900 So by default we do not have any blog posts at all then out of that we get back our state object and 44 00:02:59,920 --> 00:03:01,350 the dispatch function. 45 00:03:01,410 --> 00:03:06,800 Going to update the name of that second argument or to me the second element Sy that I to dispatch like 46 00:03:06,800 --> 00:03:13,750 so now if we wanted to we could update blog posts right here we could update the name to state instead. 47 00:03:13,790 --> 00:03:14,930 It's totally up to you. 48 00:03:14,990 --> 00:03:19,520 In my case I'm just going to leave it as blog post just to remind myself that hey this really is my 49 00:03:19,520 --> 00:03:27,590 list a blog post right here and finally I'm going to delete the AG blog post function and I'm going 50 00:03:27,590 --> 00:03:30,360 to remove that from the value prop down here as well. 51 00:03:31,960 --> 00:03:35,650 The only reason I just deleted that is that we need to eventually make use of dispatch to change our 52 00:03:35,650 --> 00:03:38,140 states rather than calling add blog post. 53 00:03:38,140 --> 00:03:41,030 So we're gonna make sure that we eventually make use of dispatch inside of here. 54 00:03:41,080 --> 00:03:44,950 But first let's finish setting up our actual reducer okay. 55 00:03:44,980 --> 00:03:46,910 So reducer member gets two arguments. 56 00:03:46,940 --> 00:03:51,550 Usually we call them states and action once again if you want to. 57 00:03:51,800 --> 00:03:52,550 I apologize for that. 58 00:03:52,550 --> 00:03:57,110 Once again if you want to rather than calling it state we could call it blog posts but usually by convention 59 00:03:57,140 --> 00:04:01,660 we just call it state so then inside of here we'll set up our switch statement. 60 00:04:01,820 --> 00:04:03,750 We'll do a switchover action type. 61 00:04:04,040 --> 00:04:08,360 So we're going to look at whatever type action has and depending upon its type we're going to do some 62 00:04:08,360 --> 00:04:15,020 different operation to operate on our state object so we need to imagine or kind of make an assumption 63 00:04:15,050 --> 00:04:17,610 about the different types that we're going to have inside of application. 64 00:04:18,260 --> 00:04:25,240 I'm going to just imagine are going to plan on having a type called Ad blog post. 65 00:04:25,370 --> 00:04:26,500 We haven't created that yet. 66 00:04:26,510 --> 00:04:30,110 We're not dispatching any action with that type but I'm going to assume that I'm going to eventually 67 00:04:30,110 --> 00:04:36,450 have it so then inside of here we're going to update our state object which remembers the array of blog 68 00:04:36,450 --> 00:04:39,690 posts and add in some new blog post. 69 00:04:39,720 --> 00:04:44,850 We're then going to return the resulting object that's going to essentially be the exact same code that 70 00:04:44,850 --> 00:04:45,570 we wrote inside of. 71 00:04:45,580 --> 00:04:47,520 Add blog posts just a moment ago. 72 00:04:47,610 --> 00:04:53,790 So we're going to return a new array that's going to have all the current values of state. 73 00:04:53,790 --> 00:04:58,910 So remember that means take all the current blog posts we have and add them into this new array and 74 00:04:58,920 --> 00:05:01,760 then immediately after that we're going to add in our new blog post. 75 00:05:01,890 --> 00:05:05,580 So I'll give this thing a title once again of a back tick. 76 00:05:05,610 --> 00:05:11,460 So a template string and I'll say blog post number then dollar sign. 77 00:05:11,460 --> 00:05:18,740 Curly braces and I'll do state DOT length plus 1. 78 00:05:18,940 --> 00:05:21,880 Then I'll also handle after that my default case. 79 00:05:21,880 --> 00:05:26,530 So if we for some reason get an action without any type that is matched by this case statement we're 80 00:05:26,530 --> 00:05:30,330 gonna make sure that no matter what we always return some state value. 81 00:05:30,340 --> 00:05:38,100 So I will put in my default case right here and I'll say return state like so OK. 82 00:05:38,110 --> 00:05:44,450 So that's pretty much it for our reducer right now so now we can go back down to our blog provider and 83 00:05:44,450 --> 00:05:51,070 we're going to create another helper function right here once again called Ad blog post. 84 00:05:51,310 --> 00:05:57,340 I'm gonna pass this helper function down into my value prop so that my index screen can very easily 85 00:05:57,550 --> 00:06:01,420 dispatch in action to add in a new blog post. 86 00:06:01,420 --> 00:06:05,860 Now you'll recall that I just said like two seconds ago pack inside this diagram that creating a separate 87 00:06:05,860 --> 00:06:08,760 function for each operation would be really awkward. 88 00:06:08,800 --> 00:06:13,150 So I'm kind of going directly against that by adding this function back in you're going to see very 89 00:06:13,150 --> 00:06:17,230 quickly that we're going to eventually add in a little bit of code that's going to essentially generate 90 00:06:17,320 --> 00:06:20,940 all these different ways of changing our state automatically for us. 91 00:06:20,950 --> 00:06:23,390 So this is just a temporary thing right here. 92 00:06:23,430 --> 00:06:23,610 OK. 93 00:06:23,620 --> 00:06:31,090 So inside of here anytime someone calls add blog post we're going to dispatch an action object and this 94 00:06:31,090 --> 00:06:35,980 thing is going to have a type of ADD blog post that exact string right there. 95 00:06:35,980 --> 00:06:42,590 So I'll put in add blog post and now once again I'm gonna make sure that I pass down add blog posts 96 00:06:42,890 --> 00:06:47,140 in my value prop to make sure that it gets communicated over 20 next screen. 97 00:06:47,140 --> 00:06:48,840 So I'll add an add blog post. 98 00:06:48,890 --> 00:06:54,500 Once again that's pretty much it OK. 99 00:06:54,570 --> 00:06:57,280 So at this point one more once again just a quick reminder. 100 00:06:57,300 --> 00:06:58,940 I know it's annoying when I repeat things. 101 00:06:59,010 --> 00:07:01,140 Nonetheless this is some pretty confusing stuff. 102 00:07:01,620 --> 00:07:05,280 So here's what's gonna go on behind the scenes when our application is first rendered. 103 00:07:05,280 --> 00:07:10,110 We're gonna have no blog posts whatsoever because our initial state is an empty array. 104 00:07:10,110 --> 00:07:12,100 We're then going to set up our provider. 105 00:07:12,180 --> 00:07:16,680 We're going to render our entire application and anything that tries to get some information from our 106 00:07:16,680 --> 00:07:22,080 blog post provider is going to be given our current list of blog posts and a callback function that 107 00:07:22,080 --> 00:07:28,320 will dispatch an action of type at blog post whenever someone calls add blog post. 108 00:07:28,390 --> 00:07:30,940 We're going to run this function right here. 109 00:07:30,940 --> 00:07:32,200 That's going to call dispatch. 110 00:07:32,200 --> 00:07:35,050 Remember that's the function we use to actually modify our state. 111 00:07:35,110 --> 00:07:39,110 We're going to call it with an object that has a type of ad blog post. 112 00:07:39,200 --> 00:07:41,700 So that's going to run this function right here. 113 00:07:43,180 --> 00:07:45,860 React is gonna call this function automatically for us. 114 00:07:45,910 --> 00:07:48,390 The first argument will be our current list of blog posts. 115 00:07:48,400 --> 00:07:51,730 The second argument will be whatever action we dispatch. 116 00:07:51,730 --> 00:07:57,340 So in this case that object right there we're going to look at the action type property if it is equal 117 00:07:57,340 --> 00:08:02,890 to add blog post we're going to return this updated state object or in this case updated state array 118 00:08:03,100 --> 00:08:09,580 that has a new blog post inside of it when we return some information from blog reducer that's going 119 00:08:09,580 --> 00:08:14,920 to cause our blog provider to automatically re render just in the same way as the U state Hook did as 120 00:08:14,920 --> 00:08:21,560 well so our blog provider is going to re render we're going to get our new state variable or our new 121 00:08:21,720 --> 00:08:27,200 list of blog post right here that was returned from our reducer so blog post is now going to be an array 122 00:08:27,200 --> 00:08:29,340 with one object inside of it. 123 00:08:29,660 --> 00:08:32,050 We're then going to re render the rest of our application. 124 00:08:32,270 --> 00:08:37,530 We're going to eventually in that process re render index screen when index screen is re rendered. 125 00:08:37,550 --> 00:08:43,580 It's going to see the new value of blog post right here and it's then going to take that new value use 126 00:08:43,580 --> 00:08:48,410 it inside the flat list and render out the new list of blog posts and that's it. 127 00:08:48,440 --> 00:08:49,850 That's the entire process. 128 00:08:49,940 --> 00:08:56,660 So let's save this and test it once again and I'll tap and sure enough add blog post 1 2 3 4 5 and so 129 00:08:56,660 --> 00:08:58,790 on and I'll do a quick test on Android as well. 130 00:08:59,120 --> 00:09:02,220 Yep works over there to OK. 131 00:09:02,250 --> 00:09:06,900 So functionally what we have right here is 100 percent identical to the used state case that we had 132 00:09:06,900 --> 00:09:12,270 before but now we can very easily add an additional case statements to this thing and start to modify 133 00:09:12,300 --> 00:09:15,110 our list of blog posts in some additional ways. 134 00:09:15,150 --> 00:09:20,160 In addition we're going to eventually figure out a really clever way to avoid having to put in this 135 00:09:20,200 --> 00:09:24,570 had a blog post function right here because remember I had just said two seconds ago that adding in 136 00:09:24,690 --> 00:09:29,040 all those separate callback functions was a little bit of a pain so quick pause right here. 137 00:09:29,040 --> 00:09:31,700 We're gonna do a little bit more refactor in the next video.