Check out a free preview of the full Advanced State Management in React (feat. Redux and MobX) course:
The "Thunk: Asynchronous Redux" 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:

Thunks are functions returned from another function, used for asynchronous actions.

Get Unlimited Access Now

Transcript from the "Thunk: Asynchronous Redux" Lesson

[00:00:03]
>> Steve Kinney: One thing that we haven't talked about in this entire time is what do we do about asynchronous code, right? We have just been storing stuff in an array. And it's been blissfully easy cuz we haven't had to talk to a server or a database or anything along those lines or local storage or anything asynchronous.

[00:00:21] And one thing you might have been thinking about which is I keep saying redux is great. It's just functions and objects and objects just go in. Okay, like how do we get the object to the store if we're waiting on an API? So the problem with redux, it's not really a problem is that out of the box, it's expecting everything to be what's called a pure function which is stuff goes in, stuff comes out without any side effects.

[00:00:46] A side effect is basically, if you do anything that was not passed in as an argument in what you spit our, your function is impure. So if you console log, you're writing somewhere else, your function is now impure. More importantly for us, if you make a network request, that is something that just happened to be out of scope.

[00:01:06] You just called it and you're using that. You're no longer pure in this case. And so redux actually, out of the box, doesn't have a way for you to do async. So we need to come up with a pattern for doing this. And so, we're gonna use these things called thunks.

[00:01:22] And when I say that redux doesn't have a way for you to do async, I wanna defend redux for a second which is redux thunk was originally in redux and they pulled it out of the library because you don't always need it. So it's not like they never thought that you might need to use asynchronous JavaScript.

[00:01:36] It was in there, it just got pulled out. So if you need it, you can pull it back in. But for the people who don't need it, we didn't need it up until now, you don't get it as a bonus thing, right? And so the idea that we would have to do asynchronous code was always in redux.

[00:01:50] It's just a bonus thing that you can add in now. So what is a thunk? A thunk is a function returned from another function. So we've actually been quietly using thunks at different points. When we use connect, that returned a function. That was technically a thunk. Here's a very great illustration of that which is the first function, it's just a function.

[00:02:11] When it returns a function, that function we're going to call a thunk. So why is this useful? The major idea is that you're returning this other function that's going to be called later, right? We want to execute stuff later, well when? Hm, all right, we've been very quiet about asynchronous code because Redux only accepts objects, but we might not have that object ready.

[00:02:36] We might say, hey, I'm getting something from the server right now, I don't have that object for you, here's a function, why don't you give it to the dispatcher? And when I have something back from the server, I'll go ahead and finish this up, right? And so we need to use this middleware, cuz Redux out of the box is not ready for this.

[00:02:53] So the middleware's like, I'll take that function, and I'll call it, and I'll wait for that to dispatch the action. So it's pretty easy to bring in, it's just an MPM library called redux-thunk. Again, it used to be part of Redux, it was pulled out. And it's a middleware that allows a user to dispatch a function Instead of just an object.

[00:03:11] So now you can dispatch functions and objects. And the goal is that that function that you dispatch should eventually dispatch an object once it hears back from the server. So this is a normal action creator, makes sense, returns an object. We've seen this a whole bunch of times so far.

[00:03:28] This is a thunk action creator. So there's a little more lines of code here but let's talk about it. So instead of returning the object that gets dispatched, right? Cuz we saw when we were working with Redux by hand, we said store dispatch and we passed it this object.

[00:03:48] So instead, we're gonna pass it a function, that will later dispatch the object, so here we'll do this API call. This could be $AJAX, it could be AXIOS, it could be indexDB, it's just a promise that we're going to, it's gonna have all of our items. When that resolves, then we'll go ahead and dispatch that event that was previously synchronous.

[00:04:10] So we'll make the API call, we've got the dispatcher from the store, we can now dispatch the event and that'll get sent to the reducer and everything's golden. And this is effectively what you need to do to implement a kind of very simple version of asynchronous code in Redux.