Check out a free preview of the full State Management in Pure React, v2 course:
The "What is a Thunk" Lesson is part of the full, State Management in Pure React, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Steve defines a thunk as a function within a function, and explains that a thunk can be useful to use if code needs to be executed later since it gives a function that will dispatch an action once it receives results from an API.

Get Unlimited Access Now

Transcript from the "What is a Thunk" Lesson

[00:00:00]
>> We talked about this useState hook. One of the things that we get in Redux is middleware, right? Cuz reducers, and it's true of Redux as it is true of useReducer, again, doesn't really have an idea. The reducer itself does not have an idea of asynchrony, right? The useFetch is the one doing all fetch and dispatch in a number of actions.

[00:00:27] And so in Redux, we have a way to solve this using some middleware. And one of the really common ways to do that is this piece of middleware called redux-thunk. In the Redux MRX course, there's other more powerful tools like redux-saga, redux-observable. And I think I alluded to before, redux-observable lets you cancel, and do bounce, and do all sorts of crazy stuff with asynchrony, totally cool.

[00:00:52] That is a workshop in and of itself to wrap your head around all that. We're gonna look at redux-thunk. And what is a thunk? It's a very complicated way of saying a very simple thing. In normal reducers, we dispatch actions, redux-thunk, or in our case, our own custom thunk that we're gonna write.

[00:01:08] And it's gonna take longer to explain what a thunk is than it is going to take to actually write the code to implement this, so bear with me for a moment. A thunk is a function returned from another function. I don't have a lot of regrets in life.

[00:01:27] One regret in life I have right now is not having an exhibit meme here, which is I heard you like function, so I put functions in your functions. So that's a missed opportunity. Maybe we can edit it and then post. And so, for instance, the outer function here, which is just a function, it's not a thunk.

[00:01:46] The function that is returned from that function is a thunk. How's that one feel? [LAUGH] Why is this useful, right? Well, it means that in those action creators, instead of dispatching an action cuz we don't have the result from the API yet, we can say, here's a function, it will dispatch an action when we've heard back from the API.

[00:02:08] And that's the basic, we're basically saying, just wait. We had to tell the reducer something. Here's the thing for you to do, and then you'll hear the action for the second. So the major idea is the thunk is code to be executed later. Here's the thing, when we hear back, it will dispatch something.

[00:02:24] So it allows us to think about this asynchronous code. Now, as I kind of alluded to earlier, useReducer doesn't have an idea of middleware, right? However, we could theoretically handle this the way that we've been handling other stuff, which is we can just make our own hooks, right?

[00:02:41] And there is, I would spoil it, and I'll show this to you at the end. There is a library out there called useMiddleware, which is an abstraction over useReducer that supports all existing Redux middleware in your useReducer hook. It's actually five lines of code or ten lines of code.

[00:03:01] And it just loads it, right? But we're gonna kind of just look at it from a higher level. All right, so what we'd love to do is simply dispatch actions that will allow us to say, okay, we're gonna say, hey, we want to hit this API. Then it will go do it.

[00:03:21] And we're gonna get rid of this useFetch hook, right, because there's a lot of little problems in here, like formatting the data we'd love to do. What happens with dynamic segments and query params, right? I'd love to say, hey, we're gonna give somebody else the control, right? And which one is the right choice?

[00:03:40] Really does, unfortunately, depend.