This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "Redux Thunks & Dispatch" Lesson
[00:00:00]
>> Brian Holt: Everything we've done here so far is synchronized, right? Someone types into a input, and I dispatch a set location action, which then goes into the occasion reducer and that updates the store. So that all happens one step after another. There is no Ajax request in here, there's no animations in here, there's no element of time in here.
[00:00:27] But I wanna be able to store breeds inside of my redux store, right? When that is asynchronous, it is asynchronous because we have to go to the Petfinder API to get it.
>> Brian Holt: So let's take what we were doing inside of search box.
>> Brian Holt: Nope, inside of app.js rather.
[00:00:52] App.js up here. This getBreeds stuff. I wanna take this getBreeds
>> Brian Holt: Request for information, and I want to move that into an action creator. So actually, what I'm gonna do is most of this just works as is, so I'm just gonna copy everything that's in here, outside of getBreeds.
[00:01:18] And here, I'm gonna make a new action creator called getBreeds.js. Here, I'm going to import PF from Petfinder client.
>> Brian Holt: Here, I'll do the const petfinder equals pf ceremony where you have to get the key process.env.API_KEY. And secret: process.env.API_SECRET, okay?
>> Brian Holt: And then, I'm gonna export default function getBreeds.
[00:02:12]
>> Brian Holt: And then, here's kinda where it gets a little interesting is this has to return what's called a thunk. Now, a thunk is just a really dumb computer science word for a function, pretty much. So let's just give you an example of what a thunk could be.
>> Brian Holt: Let's say I have the price of my stock.
[00:02:35] You don't have to copy this part. Don't copy this. Const myStockPrice. And that's equal to 1,000 or something like that. When I'm writing this code, at this moment in time, this is statically determined, right? This is determined upfront because I wrote 1,000 right there, and I can't change it at runtime, right?
[00:03:03] It's determined at the time that I write it because I wrote 1,000 right there. A thunk is the idea that I don't have to determine this at compile time, I can determine it at runtime. So instead, what I would say is const myStockPrice would be equal to determineStockPrice, right?
[00:03:25] It would be a function that would return to me later the stock price.
>> Brian Holt: So what would be said of determineStockPrice in this particular case? It would be called a thunk, right? And it's just a really fancy way that we're using functions, to determine later at run time, what the stock prices gonna be.
[00:03:51]
>> Brian Holt: So, was have anything to do with redux? This has to do with redux because when I call getBreeds for the first time, I don't actually know what the breeds are, right? They could add new breeds, they could subtract breeds, and I don't wanna just put a list in there.
[00:04:05] I wanna determine later at runtime what those breeds are gonna be. And the way I determine that is with an Ajax request. So I don't wanna statically determine it right now. Whereas I can say in animal.js, this is what SET_ANIMAL is. I know it's a SET_ANIMAL type, right?
[00:04:25] And as soon as I have, sorry, this is the reducer. But change animal, right? I know as soon as I call this action creator, I know what the animal is right away. With a thunk, I'm gonna determine, after I make that AJAX request later, to get that actual data fed into it.
[00:04:46] So going back to getBreeds.
>> Brian Holt: This is a function that returns a function.
>> Brian Holt: And the function that returns, that is the thunk.
>> Brian Holt: So return function, call it getBreedsThunk.
>> Brian Holt: And this is fed two things. It's fed dispatch, and it's fed getState.
>> Brian Holt: So dispatch and getState are going to come from redux.
[00:05:31] Redux will provide those things for us. So the first thing in order to request for the breeds that I want, I'm going to get the animal that I need. So const animal equals getSstate. Get state will go out and actually grab the current state of the Redux store and provide it back to you.
[00:05:51] So in this case, I'm going and grabbing the state in order for me to request the breeds that I want. I have to get the animal out, which is what this is, right? Then, again, grabbing here from app.js, wherever that went.
>> Brian Holt: I'm gonna go copy everything here.
[00:06:15]
>> Brian Holt: And I'm gonna go into getBreeds. And I'm gonna put inside of the thunk.
>> Brian Holt: If, okay, and anywhere where it says this.state.animal, I just need to say
>> Brian Holt: In fact, I can just do
>> Brian Holt: So I'm gonna select everywhere that I say this.state.animal
>> Brian Holt: Which I think is just those two places, and just delete those.
[00:06:43] So it says if animal, then you're gonna go out and grab the animal, right?
>> Brian Holt: This does all of the same song and dance that we have to. But now, we're not gonna call setState, right? This isn't in React anymore. We need to dispatch actions to our redux store.
[00:07:06] So how do we do that?
>> Brian Holt: Well, we have this dispatch function up here, that's what that's for.
>> Brian Holt: So rather than calling setState here, the way we're gonna do that is we're gonna say
>> Brian Holt: Dispatch.
>> Brian Holt: And the type here is going to be type: SET_BREEDS, right?
[00:07:36] Cuz that's gonna get into our setBreeds reducer. And then, the payload is gonna be this.
>> Brian Holt: And get rid of that.
>> Brian Holt: Right? So this is what this dispatch function does. It gives us an object to the reducer. And this is how you get things in the reducers is by using dispatch.
[00:08:08]
>> Brian Holt: Now, everywhere that we say
>> Brian Holt: That.
>> Brian Holt: We'll have to say instead of this, well
>> Brian Holt: We'll just say payload is empty array.
>> Brian Holt: And then, same thing down here.
>> Brian Holt: That's it, that's how thunks work.
>> Brian Holt: This is the most basic way of doing Ajax with redux, is with thunks.
[00:09:02]
>> Brian Holt: Now, you don't have to use redux this way. There's a myriad of other ways that you can handle asynchronous actions with redux. You can handle all the asynchronous actions outside of Redux. So if I went back to app.js here, instead of calling this .set state, I could be using a dispatch function in here.
[00:09:25] And handle all of the asynchronous action inside of React. And then, dispatch things to Redux. If you're gonna use redux, I don't think this is a good idea.
>> Brian Holt: In my opinion, one of the more elegant parts of redux is you can externalize all this asynchronous data fetching into action creators, or thunks in this particular case.
[00:09:48]
>> Brian Holt: So again, thunks are kind of the more basic way of doing things. It's a function that does whatever asynchronous action that you need to do. There are redux-promise, that you can provide promises to the redux store. And it will unwrap those promises and allow you to use those promises to dispatch actions to Redux.
[00:10:12]
>> Brian Holt: There's one called redux-observable that you can use observables from RxJS to do it. And there's another one called the redux-sagas that you can use generators to do it. Each one of those is more complicated than the last. But if you have to have multiple layers of coordinating, asynchronous actions, something like generators is what you need.