How to Save the Newsletter Edit Action with Redux Thunk
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

[00:00:00] Haim welcome back to the reactor building and this guy we're going to set up the action that we can save our edited item with. So if we open up news later today where this is going to be inherent our handle form submit. So it's just like we would like it is and the ones open up are actions are indexed objects and actions and our function a really similar to newsletter archives. Let's just copy this and let's rename this to say edited item or save newsletter and it all right now we want to go to an event you are out and I'll show you how this all works using post man. So I was going to open this up and show you what's what's going on here. So basically we have our title body Manjaro. Now there is a an endpoint called newsletter's slash at it. And then if we provide ID we can throw this in and then basically overwrite what's there right now. So if I open a new one of these and I say forget for someone to get the route you want to get straight here. If I had a GET request on newsletter archive it's going to fetch are going to fetch newsletter's. So basically look at this one. We're going to change this one I'm going to go back to this and I'm going to change the title to Happy Holidays. And it did. And I'm just going to cut all this out to work more and get some. So let's send that are I'm going to send it to you and then we get back that says I'm successfully save. [00:01:43][103.0]
[00:01:44] Let's head over to this Tap's. We have Happy holidays. Now if I around this you'll notice that we have different information now. It says Happy Holidays. Edited and warm. Here's some advice. Basically we want to be hitting this point in our newsletters slash at it and then provide yedi which is exactly the same kind of structure as our bootstrap warning here newsletter at 90 though don't get it mixed up. This is completely different. This is a completely different set of rights. This isn't part of the server. This is just part of a local shop. OK so let's head let's close up the shop and let's start having results. You're out and then slash newsletter and slosh it and then we just need to provide the ID and over. We know we need to pass that. So let's just stagger our edit here and let's pass so in our handle from Samit to say this. Doug prox doc save newsletter and then pass passing the 80. And the idea is this prompts does not shop per round site easily just get it right. Now let's go to our next guest and make sure we're putting an I.D. in here. So now we have access to our ID. Now let's just add this to our request here say Heidi. So now we're going to be having a very similar you are out to what we were trying to show you post. So this and we're passing in the authorization header so we can put our token in so we can authorize requests. So that's all good and dandy. [00:03:27][103.2]
[00:03:28] Now what we need to do is provide some parameters so we need to pass in the title body not just the idea because we actually need to tell the server what we want to save so let's add another parameter in here and let's just call it a title and body. Let's leave him ajar for now since we're getting we don't have enough input yet. OK. So we are tied orebody and already that should be good for now. Later on we're going to add a callback but I'll sure I'll tell you why when we get around. So now you pass in these parameters so you can see right here. Put a comma and then put title in. All right so that's good. Now we just need to basically provide these title embodied parameters through our state read it. So let's just throw those in right here title body com and check what we did. So yeah passing and as an object should be good. We should pass the same time body. OK. Let's go ahead and see if this works. I'm just going to go into the index here and I just want to console log and make sure reading this. This function OK let's go ahead and go to our in the browser. This should all be functional and let's hit it early through it. Make sure it's up to date on the newsletter. And then let's try changing this topic. You also notice that it fetched this new date a happy holidays that did and Mormonism which I changed using Posner. [00:05:12][104.2]
[00:05:13] So I'm going to put in some data in here and I'm going to change that back to a question mark exclamation mark and then I'm just going to put this back in if you need to get that content again well you can just put whatever you want I'm going with that when it's safe. And it says OK air 404 Not Found. The question is does 404. We're hitting it. That's all great but it's not it's saying for one hour sound not you will to actually see the faults go ahead and check why. Let's go to our index digest and see so we're heading newsletter. We're hitting it and then we're passing in the. But for some reason it's not working. OK let's think about this. Well let's get rid of our header for an hour just to kind of give us your view of what's going on. Let's just. OK so actually the reason why is that we're using Gebert or using his back here and put in post man made she put input and sort of get his input postin and saying put enough because the end point on the server is fine. But generally you want to use it for editing documents that already exist in the database stuff. So let's say that let's go back to the browser and see if it's working. Who's going to do this we can get a Corindi and mean get rid of the editing precaution. Mark exclamation like using accent on the uncancel and then I'm going to put it on the skin. I'm going to say and it says OK arcade that shift is not a function but I'm pretty sure our process went through. Let's see. [00:07:15][121.9]
[00:07:16] So first thing we want to do is instead of just dispatching as let's say. And that's the problem. The reason the reason we're actually getting is air and the reason this is happening is because we're trying to dispatch fresh newsletter archive. And the reason this is even in here in the first place is because we just copy this function so we know it hit our dot then which means we got a response back and then it's trying to give a payload of response data which we know is items successfully saved. And then it's trying to hit the fetch newsletter archive releaser which is then trying to throw that in it's trying to get our archive from that stream which is obviously not going to work. It's a streaming it's not an array of objects other than characters so the way we can fix this is my first getting rid of this dispatch and then a console log response data which is going to be a random successfully safe response to update. Let's head back to the browser and let's just hit save again. Well let's get our data. So you'll notice that it saved it indeed saved. But we want to fix this stuff so your own some I say this item successfully saved consul Gray. That's that's why I came. But now we need to do something else. We don't want to just log this. We want something else to happen here. And basically what we want to do is refection news letter archive because if you hit cancel you'll notice it. It took a second to update. [00:09:02][106.2]
[00:09:03] And the reason that happens is because there's new data but every time we hit our newsletter J as it's going to reset your archives so you can go get the new data and then replace it in our store and re rendered. And the way we can actually avoid it the way we can get it to update before we even go back. So if we want to see more of some and then put in your data and save. We don't want it to flash and rise it's not a good user experience. We want it to automatically be updated the way we can do that is by dispatching an action dispatching a fetch newsletter or archive and having it such on your data. So pretty simple the way we can do that is dispatch. So will the next guy since this one is going on pretty long let's say in the current terminal at Comerica so it gets does get ad get commit and let's just say set up save newsletter day action and promise using stuff. So yeah again this is really stunk and that's why that's how it's working. Make sure you save your files. I didn't do that and then I'm just going to get rid of this because now our files are changed status and come. And what we say and you said sort of save news whether it function redux OK I'm going to commit to catching the next day where we will handle the response. [00:09:03][0.0]
[538.7]