Adding Callbacks to Redux Actions
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

[00:00:00] OK so the last time we got our action relaxed thanks a lot. That scared me. We are getting our response and we want to update our newsletter here before we go. For me to go back so if I have did the content and safe and no matter how long we wait once we cancel or go back in it or not we updates once we get back and we can see. So we want to prevent that kind of flash look and what we can do that is by simply dispatching right as we get the response right as we get the response simply just dispatching fetch newsletter archive. Just a component. Just the facts. No data. We don't want to fetch the action or the action. We want to simply just call this function and have it using fetch it immediately and then when we go back it will automatically be there. So it's the same. Let's go to the app. That's what it was. And it will not change the content and then what's saving immediately when to cancel your notice it's already there. So that's great. But now we need to make it so that when we hit say it takes us back and not so on the screen. So pretty simple stuff. All we have to do is what we did appears history not push news letter but this generate kind of a problem for us something to do everything so we get saved and we go back here reload many cancels we get content. I'm going to change this. Safe. It doesn't do anything. Those appear changes are indeed news. [00:01:50][110.5]
[00:01:52] So we don't want to do it this way. This is just pushing it onto our or you are out there what we want to do is actually do it in our newsletter. So in Kampala it didn't sound right underneath here we just see this history props for this art history not push this stuff from study history. I believe that that's the route. For some reason I can't remember it. It's this stuff Prague style. Yes. Yes. Is this the props that history push. And then we want to put slash newsletter. So this should work. Let's go back to our out and see whether there's going to be one small problem with that. OK. First things first we put it to the wrong one. We don't want to put it into component did not because we're trying to go somewhere else. We want to put it in our handle from Samit right underneath her seat. So let's head over to our reporter Vivoda the motive and IT analyst changed something to say and you'll lose it back immediately. And it saves it. But it's kind of messed up. We're kind of getting what we're getting before. We're also getting a ton of these are guys. So the way we can fix this is by creating a callback in Java JavaScript so interested Neusner added We want to pass another route and just call it. Well we're going to it's going to be a function with a callback much like we see in other things we've done such a promise that has a callback. [00:03:35][103.3]
[00:03:36] So basically the idea of a callback is like for at least put it where any of these get put. Then all these what's happening is we're calling the server. It's going up to the server and then in the server code once we're done doing whatever we want to do with the database or whatever we want to do on the back and there's a function call that saying okay go back and then all this happens. So same idea here except for local locally we just form passing this Arab function here. I'll type it again so you understand a little bit better. Holograms and you could even say function. And then just like that not the callback as well but I'm going to use an app function because yes six are functions and the function is going to close off our call here and then year we want to push. So basically the idea of this is that okay we're going to save it and then when it's done saving we're going to push this to our history. So but we have to specify when it comes back because if we go to our index not just we have no idea when this called an accident. Call me an idea of what's going on. So first to do is passing Premarin called callbacks are basically passed into function the reference to the function. Now we can call this as a function anywhere in the code here. If I put it right here that would run immediately and it will push and push us where we don't to that newsletter but we don't want to do that. [00:05:06][89.6]
[00:05:07] We want to do that after we get our data back so we can do is say okay to dispatch letter archive and then callback right now should work. So that's good to hear. It's hit newsletter and it hinted at it and then throw it into some new content let's say. But you'll notice it kind of improved things but you still saw that kind of flash and we can fix that again by integrating another callback into our fetch news archive. So basically a refresh newsletter archive we want to have a proper callback and then we can say okay once it's once it's received our data and once we've received our data we're going to put it in a store and that's going to be pretty much instant because it has nothing to do with the network it's all local and computers were pretty quick. So that's going to be instant response which is over Arcadians which also contains our new item. So that will all be in store for eventer I see. Now let's go back and say callback and then we have to put that callback and fetch newsletter archive. So let's put in parentheses there an arrow function and then we'll call callback. So let's save this and then I'll go over to what's going on again since I was a little bit in depth before we before we move on. So we're went ahead. Miller says Comox is not a function and the reason that's happening is because our initial loading were fetching but it doesn't know what color is. So we can say to fix that saying if callback then we want to callback. [00:06:45][98.6]
[00:06:46] So it's good to check if its even exists because our initial fetch newsletter archive which is our in our newsletter D detail or and our letter j s passing call. We could if we wanted to but there's no reason to do it our initial uses. So let's just instead of putting a call out there unless you put a check in here to see if callback exists. So when we call it here saying Okay exists call that it's safe. Let's go back here and then we'll see it and then I'll explain it so you don't get that air into it. Then in here let's just say warm some and everything works and you might have seen the console go a little while. Printing out all our stuff and he requests before it even directed back. What's it and see that again. I'm checking the console. And then see some comments it's safe you'll notice anything happens that throws us back not because it's not from his back until we're getting our responses. So that's how you fix that. And let's just go over the flow a little bit one more time so you understand those pretty hard to understand Mr. Koch first and some good status that you can make let's say adding callbacks and actions to yeah let's just say callbacks to fetch and save newsletter. OK now let's go over this flow and then we'll move on to the next day. So in our news at it we are seeing such newsletter guys are saying her handle incidents once the user taxing content hits Handal form submit or submit a save. It's going to say OK we want to go to our actions which we've mapped. [00:08:47][121.3]
[00:08:48] We've connected to our application using meet ups and then we want to say save newsletter that we want to pass on the title. The ID OF THE ITEM LOOKING FOR THE TITLE OF THE BODY Yegi and the Will callback. And then in callback we want to push newsletter to write so we can get back. Okay now let's go to our next object. We have seven years later that we're taking and are premieres here. We're returning using redoes function with dispatch as a printer and using an excuse to perform a request for we will save our data and we'll pass in our local storage token or Authorization header token and width so we can say okay we're logged in. We were going to this route we're authorized to be here and then we have a red dot. Then right here and we're getting a response. And then with our response we're not doing anything because all it's saying is successfully sick so we don't need to do anything with that. We could out the console but it's not good to leave those things in production applications. When he already knows we might as we'll get it now and then we're saying OK we got a response back the items successfully said. So let's say dispatch let's dispatch fetches archive so we can retrieve our new items. So we're going to use the archive. It's hitting our endpoint. [00:10:15][87.2]
[00:10:16] NEWS ARCHIVE It's receiving our data and then once we receive our data and put it into our redux store locals or local database so to speak it saying OK that's in there let's say if callback if this callback exists and it does since we provided one here then let's call it saying callback and then it's going to this function and then it's calling a callback. In our state news Loretta's which is then going back to our newsletter edit and saying this dot prompts dot history don't push that's coming. If you're coming from a beginner's perspective that might be really hard to understand at first but once you understand what exactly is going on it's pretty simple but definitely something that might be very confusing at first. Just take a second really make sure you understand this before you move on because not only is it important that you understand it for the hour but it's just it. Colette's and Kovács are really important concept you need understanding and programming in general. So just make sure you understand that before you move on. But yeah in the next guide we will see where we are when editing it. We have our callbacks saving the items and we have our initial Crownies in here she added. The next day would fix this. Whenever we hit cancel or say if we're getting an error rate here and it's duplicating our content we can really simply and we'll do that in the next day. So I'll see a. [00:10:16][0.0]
[610.6]