React Native (feat. Redux) Redux Thunk Middleware
This course has been updated! We now recommend you take the React Native, v2 course.
Transcript from the "Redux Thunk Middleware" Lesson
>> Scott Moss: So async stuff in Redux is a little different, it's not quite the same. So let's just look at this on our Todo app. So I'll say cd Todo and we'll open this up.
>> Scott Moss: No, wrong thing.
>> Scott Moss: See, Atom takes forever to open up sometimes. Does WebStorm take this long to open up?
>> Scott Moss: [LAUGH]
>> Speaker 2: Even longer.
>> Scott Moss: Even longer, yeah. You gotta come back to it. All right, so let's convert some of this todo stuff over to be async. So the first thing we wanna do is, we need some server, so let's just make a server right quick. So touch db.json, there we go.
[00:01:14] And then in db.json I'll just have,
>> Scott Moss: todos.
>> Scott Moss: There we go. Sweet, so we got todos and then what I need to do now is, let's see, where is our state? So we have our state here, we need to actually make Redux able to handle asynchronous things, right now it can't.
[00:01:40] So we actually need to add some middleware for this, and the easiest one to use I would say is probably Redux Thunk. So if we npm install --save redux-thunk,
>> Scott Moss: This is gonna allow us to add some middleware to our app so we can actually do some async stuff.
[00:01:59] So let's head over to our store and what we're gonna do is import thunk from redux-thunk and we also need,
>> Scott Moss: applyMiddleware from redux, cuz we're gonna apply some middleware now.
>> Scott Moss: So a thunk is just a function that's gonna allow us to do some async stuff. But it's not gonna be an action.
[00:02:32] It's just gonna be an action creator that dispatches actions but it itself is gonna be a async. Async function that on a result of some async action call an action. Does that makes sense? So it's a function that we can call that's gonna be async and then when it resolves, it will call an action.
[00:02:50] So we'll get rid of this initial state here and instead we'll say applyMiddleware and we'll say thunk, there we go. So now we've got some thunk in there. And what we can do now, if we head over to, let me see reducers here, we'll make it a new file called actions.
>> Scott Moss: Or actionCreator, I guess. And we'll make a new one that just posts to todos and it'll make one that gets todos. So const getTodos.
>> Scott Moss: And export const createTodo that takes a todo.
>> Scott Moss: Cool, so getTodos, all it's gonna do and what these functions need to do is, they're thunks so they're gonna return another function.
[00:03:54] So because this is implicit I can just return a function like this. And the argument that this return function's gonna receive is a dispatch. So I can just go ahead and do that. Is anybody confused about that syntax right there? So this is a function called getTodos which is immediately returning another function.
[00:04:11] We're just taking dispatch as an argument. Which is immediately about to return something else. Everybody feel me on that? All right, so this function, the first thing we wanna do is we wanna say. This is your opportunity to dispatch a starting action, remember I had the action separated where it was like add exercise, add exercise, completed.
[00:04:32] This is where you would do that. So you would fire off an action like, I'm about to add an exercise and then once that resolves like, all right, exercise completed. So this is your chance to do that. But we're not gonna the pretty one, we're just gonna jump right into it and we're gonna say fetch from http.
[00:04:48] And for some reason, I need to use the IP address cuz it breaks if I don't. Don't be looking at the IP address, http., and it's probably gonna be on port 3000, we'll change it if not, /todos. So we wanna fetch that with these headers
>> Scott Moss: applications/json, a lot of boilerplate.
>> Scott Moss: All right, I think we only need that for a get, there we go. So we're just gonna get the todos and then we'll say .then. And we'll just assume that it's all good, res.json .then, these will be the todos. And what we wanna do with the todos here is we're going to dispatch an action.
[00:05:51] And, I think we already have actions here, right? If we look inside, yeah, we have an action called CREATE_TODO. We wanna go ahead and just, I'm just gonna ahead and just copy the string here, so I don't flag modulizer and all this stuff. So we'll just go ahead and dispatch an action with,
>> Scott Moss: A type of CREATE_TODO, oops, CREATE_TODO and the payload is going to be the todos that we got from the server. All right, so this is just a asynchronous function and then when it resolves, I'm gonna dispatch an action. That's what's happening here. And that's why we get this dispatch, this is what thunk is doing.
[00:06:38] It's like, hey, here's the dispatch, so you can do all your async stuff, and then dispatch your actions. So we're gonna do the same thing with createTodo, I'm just gonna copy this.
>> Scott Moss: Except this is going to be,
>> Scott Moss: POST and we do, oops. That's a POST and we do need Content-Type here.
>> Scott Moss: Cool, all right.
>> Speaker 3: Misspelling.
>> Scott Moss: Thank you. Cool, all right, and then this one, I'm sorry, this isn't CREATE_TODO, this is GET_TODOS, this is CREATE_TODO. This takes a todo and then we need to put on the body, JSON.stringify(todo). There we go. And when this is done creating, I think this is gonna spit back the todo that we created.
[00:07:45] So we'll grab that. And this will be CREATE_TODO with one todo. That's a mouthful. So really it's just your async function. And then in the resolution, you just call a dispatch and pass in the payload. Mix that with redux-thunk and we're able to do this. So now, just let me update the reducers to make sure we have the one for getTodos.
[00:08:09] So we'll just say case for GET_TODOS,
>> Scott Moss: Let's make that right quick.
>> Scott Moss: So the case for that is, literally, we're just gonna overwrite the entire state, whatever we got back from the server.
>> Scott Moss: So just return the payload.
>> Scott Moss: There we go. So just wipe out whatever we have locally and have the server completely be the new set of todos.
>> Speaker 4: I think it should be action.payload.
>> Scott Moss: Yeah, action.payload, thank you. There we go. So we got that, we got our action creators hooked up. Now if we head back over to our Todos, this is where we would call them.