Check out a free preview of the full Advanced State Management in React (feat. Redux and MobX) course:
The "Async Actions and Debugging" Lesson is part of the full, Advanced State Management in React (feat. Redux and MobX) course featured in this preview video. Here's what you'd learn in this lesson:

Add the asynchonous actions and debugging along the way. - https://github.com/stevekinney/jetsetter/tree/live-coding-redux-thunk

Get Unlimited Access Now

Transcript from the "Async Actions and Debugging" Lesson

[00:00:03]
>> Steve Kinney: All right, so, we have adding a new item. So, toggling a new item, this is going to be, let's just take a look at the API real quick.
>> Steve Kinney: So we can update an item, so we're still gonna have to manually, yeah we'll manually change this one with a new item.

[00:00:21] So we need to send that along, all right, so let's do that.
>> Steve Kinney: toggleItem, I know I'm gonna need this payload in here. And we'll go ahead and,
>> Steve Kinney: We're gonna take the whole item since we're gonna.
>> Steve Kinney: Which might need a little bit more refactoring in a second, but we'll get to it.

[00:00:48] So we'll take in the item, and we'll make the new updatedItem.
>> Steve Kinney: Which will be a copy of the item, as we've seen before. And then, packed being the opposite.
>> Steve Kinney: And then, what we'll do is we'll return,
>> Steve Kinney: dispatch,
>> Steve Kinney: Api.update, and we'll give it the updated item, and then when that succeeds,

[00:01:31]
>> Steve Kinney: We will go ahead in here and we will dispatch toggleItem and then the new updatedItem.
>> Steve Kinney: I think I have that on my clipboard, type TOGGLE_ITEM.
>> Steve Kinney: Is the updatedItem.
>> Steve Kinney: Extra parenthesis, so I can actually return that object.
>> Steve Kinney: Cool, my suspicion is that if my API was slightly off on the previous one, this one is also going to break but then so is remove.

[00:02:09] So in a perfect world they're not going to break, but I'm going to also implement remove. So that if I have to fix both of these I can do it at the same time rather than jumping back and forth, all right, very cool. So we'll grab,
>> Steve Kinney: This and now we would simply,

[00:02:32]
>> Steve Kinney: return dispatch.
>> Steve Kinney: And at this point we would do an api.delete.
>> Steve Kinney: With the item.
>> Steve Kinney: Cool, and then when that has been successful, cuz it always will at this point, will dispatch.
>> Steve Kinney: All right, here we need to dispatch this one as well.
>> Steve Kinney: The extra parentheses.

[00:03:19] All right.
>> Steve Kinney: Again sales pitch for a rainbow parentheses in Visual Studio code big fan. All right, so, failed to compile we got ID is not defined cuz we want the full item.
>> Steve Kinney: All right and then the mark all as packed, remember there was a fun API method that would just basically mark them all as packed.

[00:03:47] So, let's go ahead and do that as well. And so again, that is now going to return the func, that is gonna do Api.MarkAllAsUnpacked.
>> Steve Kinney: And when that happens,
>> Steve Kinney: We'll go ahead and we'll dispatch,
>> Steve Kinney: type: MARK_ALL_AS_UNPACKED. All right so, chance that I've got to do a little bit of change to the API because I was taking in IDs before, and doing it there, but now I'm gonna have the server do that stuff.

[00:04:28] Which makes sense, so we'll go ahead and check that out.
>> Steve Kinney: Adding and showing should be fine, chances that it's not gonna work when I try to check or uncheck. Let's just add one more, wine, cheese, beer.
>> Steve Kinney: Okay, that does not work currently.
>> Steve Kinney: Cool, so we'll go ahead and take a look at the reducer.

[00:05:00] So we're gonna dispatch this item, the full item in this case, cuz that is what I believe that my API is expecting.
>> Steve Kinney: Right, lets double check this, yeah it's expecting the full item.
>> Steve Kinney: It does expect the ID in that case, let's actually switch that one back, got overzealous.

[00:05:37]
>> Steve Kinney: Only one tiny difference between the two, not two. All right so we can remove or refresh.
>> Steve Kinney: All right, not really from the database, this is fun, we're having a good time. So we'll delete the ID.
>> Steve Kinney: It is taking the full one it's just pulling that off.

[00:06:20]
>> Steve Kinney: All right, so here's what we'll do. Let's see if remove works now.
>> Speaker 2: Do item.Id, and the Api.deleteItem.Id, no?
>> Steve Kinney: No, it's pointed off the item. I think at this point it is mostly, I think removing from the database, nope. It's very good that I'm not getting an error, other than this prop type, which is not helping me right now.

[00:06:54] All right, so we'll go ahead, let's debug this together, it's gonna be fun. So, we're gonna delete the item, and so if I go in the API it is pulling the ID off the full item that comes in. It should get all of them and then it should set the new one in this case.

[00:07:13] But it looks like I'm not returning the promise by accident, so I will fix that shortly.
>> Steve Kinney: Nope.
>> Speaker 2: Wait, yep, return await.
>> Steve Kinney: It should still delete it from the server though.
>> Speaker 2: Yeah you are right.
>> Steve Kinney: Cuz is the only like, guess that I have in this case.

[00:07:47]
>> Steve Kinney: So let's,
>> Steve Kinney: So we're getting undefined test ten, all right, so let's track that up. So if we start here we have the full item, and I guess that's probably gonna be the,
>> Steve Kinney: So it's just the ID in this case.
>> Steve Kinney: So let's go ahead and,

[00:08:46]
>> Steve Kinney: Go with this.
>> Steve Kinney: I'll change it here cuz it'll just be the ID.
>> Speaker 2: In your reducer, even ID.
>> Steve Kinney: What's that?
>> Speaker 2: In your reducer.
>> Steve Kinney: Hold on I see, items-actions, I got line 45, item is not defined.
>> Speaker 2: Yeah, just one more.
>> Steve Kinney: Got it, thanks.

[00:09:13] [LAUGH]
>> Steve Kinney: All right, so delete some AUI, and it stays deleted, little bit of victory, we still gotta deal with the check box. So let's see what's going on there, if I look at update item, it's expecting a full, let's go back to the API. Look at the API, update, I was expecting a full item and it's trying to go through and fix all of them.

[00:09:46] So let's actually just change this one real quick, and I'll update this one for everyone and push it up. So we'll just pull in the id, cuz that's what we're getting.
>> Steve Kinney: We actually need the full updated item don't we? So let's actually get the item in this case.

[00:10:08]
>> Steve Kinney: All right cool, so we need to get the updated item into this action creator. Where is this coming from?
>> Steve Kinney: It's likely coming from the item a component, right? They're gonna click on that check box, we're gonna get the payload ready, it's gonna go to the action creator which is gonna go to the API, which is probably what we need to go look for it.

[00:10:31]
>> Steve Kinney: So, onCheckOff is getting passed in, so let's go to the,
>> Steve Kinney: So onCheckOff is getting the ID at this point, and we really need to get the full item. So let's go ahead and,
>> Steve Kinney: Well let's leave that one that we fixed earlier, let's not get ahead of ourselves.

[00:11:15]
>> Steve Kinney: So item, full items will go from onCheckOff, let's go back and check again.
>> Steve Kinney: All right, here we've got the full,
>> Steve Kinney: ItemList packed.
>> Steve Kinney: So we know that's changing the database cuz I've refreshed the page.
>> Steve Kinney: It's moving, so let's just follow this along and debug this.

[00:12:04] We're gonna dispatch the full item, so let's go to the reducer
>> Steve Kinney: Toggle item is, it's doing it twice so.
>> Steve Kinney: So if we find the one that we're looking for, we're gonna return,
>> Steve Kinney: action.item.
>> Speaker 2: And it's action.item that ID that you wanna test against on your-

[00:12:47]
>> Steve Kinney: Yep, thank you.
>> Steve Kinney: All right, [LAUGH] we're successful, right? We had to do a little bit of refactoring, but these will all persist they are saving. We are now asynchronous right, everything is going to a thunk, the promises get executed, then we dispatch the action that updates the UI.

[00:13:16] Right, now thunks are great, because they're simple right, we had to do some debugging. But effectively the pattern before we hit that part was, take the action that you're doing, do your asynchronous event, and then dispatch the action, right? So it's really easy to get started with thunks, install the middleware, just dispatch a function that eventually dispatches the action, and all of a sudden you're ready for async.

[00:13:41] But, there are some problems with thunk.