Check out a free preview of the full Complete Intro to React, v3 (feat. Redux, Router & Flow) course:
The "Middleware & Thunks" Lesson is part of the full, Complete Intro to React, v3 (feat. Redux, Router & Flow) course featured in this preview video. Here's what you'd learn in this lesson:

Brian introduces a thunk, which is a function wrapped around a value and illustrates importance in asynchronous operations.

Get Unlimited Access Now

Transcript from the "Middleware & Thunks" Lesson

[00:00:00]
>> Brian Holt: What we're gonna do now is, inside of details, we have this axios.get logic. And this is really application state, in my opinion, right? We're requesting something from the API, and then we're storing it right now in the state of details, right? But if we have Redux, this is probably something that should live inside of Redux.

[00:00:24] The problem that we have right now is we have no way of achieving asynchronous Redux, right? Now, don't get me wrong, we could still just make the get request here, right. And then dispatch the final action to Redux and that's acceptable, you could do it that way right?

[00:00:42] But I would argue that there's a better way to do it, and that's for Redux making the asynchronous request for you and then dispatching more actions on top of that, right? So moving these axios request from componentDidMount, moving that into our action creators, right? That's, in my opinion that's the goal, that's the best way to do it.

[00:01:03] But again, if you're going to action creators, when we're creating actions and things that we pass into the dispatch function, the only thing that Redux knows how to understand right now are synchronous objects, right? It has to be an action with a type and a payload. And that's the only thing that Redux knows how to do.

[00:01:23] So we need to augment somehow the abilities of Redux. Now there are several ways to do this, and I'm gonna show you, I'd say one of the most common and the most popular, which is redux-thunk. And there are several ways to do this, there's a redux-promise, there's redux-observable, there's redux-sagas.

[00:01:43] And we can chat a little bit about what those are, but today we're just gonna do thunks. And then I'll leave the more advanced use cases for you to go discover yourself. So what is a thunk? The answer to that question really is a thunk is pretty much just a function, right?

[00:01:58] It's just a real fancy way of calling functions. It's a little bit more complicated than that. It's a function that's going to return to you a value that's determined at run time, right? So, if I say var x = 5, this is determined already statically forever, right? X is gonna be 5, right?

[00:02:17] If I make it a function that returns something, that's going to be determined wherever that function is called, right? So that's what a thunk is, it's basically deferring when you're gonna determine what that value is. So for us we're deferring when we're going to create the actions until it's asynchronous action is completed.