This course has been updated! We now recommend you take the React Performance course.
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.