Redux Thunk

[00:00:00]
>> Steve Kinney: So we're gonna look at two strategies for dealing with aync. Redux Thunk is easy, right. It is pretty straight forward, but has some foot guns, which is the kind of argument that we had was, we had a developer saying, man I can do anything with it. It's super flexible.

[00:00:16]
And my problem was, yeah, we can do anything with it. It's super flexible, right? It's very, I believe there's a Dan tweet that I have seen, where he basically says, I wrote it as an example of how we might do stuff. I didn't actually expect it to get fully adopted.

[00:00:30]
Which is the story of most of my successes in life. [LAUGH] Which is, I didn't think this. I wasn't taking this super seriously, and it took off. So we'll talk a little bit about what a thunk is. A thunk is, again, it's a just JavaScript thing. It's a function returned from another function.

[00:00:46]
And what does that mean, right? The first one is a regular function. The second one is another function that we return. All right. So why is this important right? When we're using it with Redux, we have the idea of, hey, we maybe need to make an Ajax call.

[00:01:04]
And yeah, we need to do that. And then, we'll dispatch the action when we're done, right. And so the thunk gives us the function to do, it's effectively, you are not wrong for thinking about it like a callback. Right, it's syntactically a little different, but I think the callback is a great metaphor to use to wrap your head around it.

[00:01:26]
The problem with callbacks, callbacks are functions. And Redux doesn't deal with functions. You remember when we tried to, in the very beginning of this course, we tried to pass a string as an action and it got very upset with us. It's like, I'm sorry only objects. So we're like here, here's an object.

[00:01:42]
It's like, no, no, no, no. Only objects with a type property, right? Redux has, it's pretty light weight but it does have some opinions. So we can't give the Redux store a callback. We can't even give it a promise, right? And a lot of this is side effects, which are against the rules anyway.

[00:01:59]
So a redux-thunk is a middleware. And what it does is allows us to dispatch a function, right? The middleware will catch it. And then when we run the function, when we call the dispatch from that function, that action will then get handed to Redux. So effectively, Redux doesn't know anything about these functions, or any of this async, it's saying like, hey, the middleware catches this function.

[00:02:24]
I will do the thing, and you tell me when to go dispatch that action, right? So it gives an ability effectively to wait, right? Wait until we hear back from the network. Wait until whatever it is. Wait until something comes over our web socket, whatever. So it kinda looks like here we might have just a regular action creator, right?

[00:02:45]
But okay, how do we know when we heard back from the API? This is what it would look like with redux-thunk. The fake API would use Api.getAll, when that promise returns we'll dispatch. So, instead of having the action creator as we saw before that just creates the object and off it goes, we have an action creator that returns a function, right, a thunk.

[00:03:10]
And that will then wait for the promise to resolve and do all of those things. And I mean, theoretically, you could get really fancy in your mapDispatchToProps and do it all there. But that's kind of gnarly. And it means you would have to implement it everywhere that was hitting the same API.

[00:03:25]
Here, you can basically use this action creator, it will do all the stuff and it will fire a real deal Redux action when all things are said and done.