1 00:00:01,170 --> 00:00:05,580 Our blog post forum is now all ready to go when we just need to make sure that whenever a user submits 2 00:00:05,580 --> 00:00:08,180 that form we do something better than just console log. 3 00:00:08,180 --> 00:00:10,060 That title and content. 4 00:00:10,140 --> 00:00:15,180 So in this case whenever user submits that form we definitely want to somehow modify our state. 5 00:00:15,180 --> 00:00:19,450 Remember right now all of our state is being contained inside of our context blog context. 6 00:00:19,460 --> 00:00:26,090 J has filed inside of here we have our reducer and underneath it we have our different action functions. 7 00:00:26,280 --> 00:00:31,320 These action functions dispatch an action and that's how we change our state object. 8 00:00:31,320 --> 00:00:37,080 So in order to actually take the new title in content that the user provided and use it to actually 9 00:00:37,140 --> 00:00:41,270 update something well we need to make sure we add in a new action function. 10 00:00:41,580 --> 00:00:47,130 So inside of blog context right after delete blog post I'm gonna add in a new action function and I'll 11 00:00:47,130 --> 00:00:52,480 call edit blog post so this will have the same signature as the others. 12 00:00:52,480 --> 00:00:57,370 It's going to be a function that will be called with dispatch and then inside we're going to return 13 00:00:57,490 --> 00:00:58,330 a new function. 14 00:00:58,330 --> 00:01:04,070 Like so remember this inner function is what's going to actually be ran inside of our component. 15 00:01:04,240 --> 00:01:11,200 So hopefully we're going to call this inner function with our new title and content. 16 00:01:11,260 --> 00:01:16,930 I think that in order to understand what blog post we want to update we should also provide a new I.D. 17 00:01:17,020 --> 00:01:17,970 or not a new idea. 18 00:01:17,980 --> 00:01:21,420 But the idea of the blog post we want to edit as well. 19 00:01:22,200 --> 00:01:27,230 So then inside of here we can dispatch a new action. 20 00:01:27,250 --> 00:01:30,270 So remember that's gonna be an object with a type property. 21 00:01:30,270 --> 00:01:36,650 In this case we'll make our type something like edit blog post and then for our payload we will take 22 00:01:36,650 --> 00:01:42,230 that I.D. title in content and throw it into an object inside the payload. 23 00:01:42,230 --> 00:01:49,640 So put a object inside of here and I'll say the I.D. of the blog post we want to edit is I.T. the title 24 00:01:49,790 --> 00:01:58,470 is going to be this new title we just passed in and finally the content will be that new content we 25 00:01:58,470 --> 00:01:59,900 just passed in as well. 26 00:01:59,910 --> 00:02:01,710 Now I know this is a really long line of code. 27 00:02:01,720 --> 00:02:07,020 So going to say this really quickly just to fold it like so so you can see what's going on more easily. 28 00:02:07,030 --> 00:02:12,040 So now in that payload object we've got a bunch of duplicate keys and values so we can condense that 29 00:02:12,040 --> 00:02:22,530 to be just I.D. comma title comma and content like so now to make sure that this function is available 30 00:02:22,530 --> 00:02:26,990 to all of our child components inside of our application we'll add it into this object. 31 00:02:27,000 --> 00:02:33,650 That's the second argument of create data context so over there as the third key value pair inside there 32 00:02:33,710 --> 00:02:35,750 I'll put in edit blog post 33 00:02:39,110 --> 00:02:44,410 OK so now that this function is available to all of our components we can go back over to edit screen 34 00:02:44,410 --> 00:02:51,980 dot J.S. here's edit screen remember that function we just added in is now available through our context 35 00:02:51,980 --> 00:02:52,710 object. 36 00:02:52,880 --> 00:02:56,920 So in addition to pulling off state right here I'm also going to pull off. 37 00:02:57,440 --> 00:02:59,220 Edit blog post. 38 00:03:00,250 --> 00:03:05,470 And now we can call that function from inside of our on submit callback. 39 00:03:06,250 --> 00:03:13,060 So instead of doing the console log I'll do edit blog post and I'll pass in the I.D. the new title and 40 00:03:13,060 --> 00:03:14,140 the new content. 41 00:03:14,770 --> 00:03:20,950 So the ideas we can get access to inside of here either by referring to blog post I.D. or using navigate 42 00:03:20,980 --> 00:03:22,780 navigation dot get param I.D.. 43 00:03:22,960 --> 00:03:26,400 Either one in this case since we're already getting that blog post right there. 44 00:03:26,530 --> 00:03:31,450 Let's do actually I want just to be really consistent because this is gonna kind of set us up for some 45 00:03:31,690 --> 00:03:37,750 future success will refer to navigation get pram I.D. and rather than just duplicating that code right 46 00:03:37,750 --> 00:03:38,070 there. 47 00:03:38,080 --> 00:03:43,560 How about we save ourselves a little bit of typing and assign it to a new variable up here at the top 48 00:03:43,570 --> 00:03:52,290 so I'll say const I.D. is navigation dot to get param I.D. And now we can just refer to I.D. everywhere 49 00:03:52,310 --> 00:03:58,000 inside this component so I can clean up this comparison and just say find a blog post dot I.D. equal 50 00:03:58,000 --> 00:04:05,020 to I.D. and then back down here inside of edit blog post as the first argument will pass and I.D. then 51 00:04:05,050 --> 00:04:11,960 our new title and then our content okay. 52 00:04:12,010 --> 00:04:14,710 So that should be a good first step here. 53 00:04:14,720 --> 00:04:20,320 Now we've got the ability to call this action function and the action function back inside a blog context 54 00:04:20,320 --> 00:04:23,100 dot J.S. dispatches in action. 55 00:04:23,270 --> 00:04:29,210 Remember that dispatch when we call it react is gonna take that object right there and automatically 56 00:04:29,210 --> 00:04:32,030 call a reducer that we defined at the top of the file. 57 00:04:33,820 --> 00:04:39,280 That action object is then going to show up inside of here as the second argument and the first argument 58 00:04:39,310 --> 00:04:41,770 is going to be our current list of blog posts. 59 00:04:41,800 --> 00:04:47,170 So now we need to add in a new case statement to the thing we need to go through our state array we 60 00:04:47,170 --> 00:04:52,870 need to find the blog post we're trying to edit and essentially replace it or edit it using the information 61 00:04:52,900 --> 00:04:54,970 out of our action object. 62 00:04:54,970 --> 00:04:57,910 So let's take a quick pause right here and tackle that in the next video.