React Native (feat. Redux) Async Redux Solution
This course has been updated! We now recommend you take the React Native, v2 course.
Transcript from the "Async Redux Solution" Lesson
>> Scott Moss: Let's just evaluate what's actually going on here with this async stuff cuz I did a bit of an abstraction. Does anybody actually understand what I'm doing here? You get it, you looked at it? So I'll just walk there real quick, let's go to that actual function, first, async action creators.
[00:00:19] Cuz I have this function called createAsyncCreator. The reason I call that because you're actually making a async creator. You're making a function that's gonna create an action, but it's async. So that's why it's called createAsyncCreator. And it takes in a startAction, so the action you want to dispatch before you write a async function.
[00:00:39] This will give you a chance to do UI things like show a loading spinner or something like that. Like I would dispatch loading true. And then somewhere in my UI, it's gonna be listening for loading to be true and it's gonna load a loading spinner, right? And the endAction.
[00:00:52] So, hey, when this async operation is done, what action do you wanna dispatch? And then the actual asyncFn you want to run. So what it's doing is it's going to, it's expecting you to dispatch this because it's going to return the third care given the dispatch just like we did in another example.
[00:01:13] So it's gonna go ahead and dispatch that startAction with no payload, just a startAction by itself, no payload, so you can use it or not. And then I'm just gonna go ahead and create the dispatchEndAction, I'm not dispatching it yet, I'm just creating it, I parse in the action type.
[00:01:30] This is gonna return a function that takes a payload, we're gonna use it later on. And then I'm gonna invoke that asycnFn that you parsed in, also parse in the dispatch here just in case inside that asycnFn you wanna use dispatch in there. Maybe you do, maybe you don't but I'm just gonna parse it in.
[00:01:47] And then, whatever the result that asyncFn is, I'm automatically gonna dispatch it with the given endAction that you provided. So I'm gonna dispatch it there, and then I'm just gonna go ahead and dispatch any errors, if any.
>> Scott Moss: All right? So that's what the createAsyncCreator is doing, so we go ahead and actually look at the async functions.
[00:02:11] In this case, I say fetchCurrentWorkout, so we're implicitly, we're doing an implicit return here, implicitly return AsyncCreator. Which takes the first action we want to call, in this case we're not even doing anything with it but it's there. The endAction which is actually important, that's what's changing the state, and then just an anonymous function right here.
[00:02:32] That's returning api.get (current_workout). So this is an anonymous function. This is the function, if you go back and look, let's close all these tabs, if we, I have so many tabs open.
>> Scott Moss: There we go. So this function is the actual function that's being called, here, asyncFn. That's the function that's being called, and we're parsing in dispatch.
[00:03:00] So that means, I could use dispatch in here to if I wanted to because we're getting dispatch, but I didn't need it. So I wanna do dispatch, it's not that I can dispatch something here too, but I don't need to. So this brings us to this API helper.
[00:03:14] So it was really nice. Instead of using the fetch everywhere and use and creating headers all over again, and write the URL all over again, I just made a API helper that did it all for us. So if you go look at the API helper. This is two methods in here.
[00:03:26] We put the headers at the top, made a function to check the status because if the fetch API doesn't error out on status codes, it doesn't error out on status code at all. So you gotta check yourself. I think it should have done that but, so, that's what I'm doing here, I'm saying if the status is greater than 200, it's an error or less than 300.
>> Scott Moss: I'm sorry, if it's not then throw an error. So that's what I'm doing here. And then I also just made a quick function just to parse the JSON cuz we're gonna do that on every single response. So now, all I have to do is a say fetch with the given path and then I put the default headers, check the status, then parse to JSON and send that back.
[00:04:10] So this is what's gonna get attached to the payload over here. Whatever this returns, that's what's gonna get attach to the payload. Same thing for POST. Take a path, take some data to post, headers, body, stringify, check the status, parse to JSON. So this is a helper method around the fetch, so we don't have to do this everywhere in our app.
[00:04:29] We can just say API.post, API.get, API.put, whatever. Everybody follow me there. So this is just an abstraction. It's a lot cleaner. So now, if we head into the meat and potatoes, the currentWorkout, the first thing we need to do is we have the currentWorkout, we have the exerciseModal, we have the exercises.
[00:04:52] We got addExercise here but it's dispatching the static one, so let's get rid of that. We don't want addExercise. And in fact, what we want to do is we want to use these two methods right here. fetchCurrentWorkout and addExerciseToCurrentWorkout. Those are the action creators that we have. So those are the two that we want.
[00:05:10] So we'll come down here and we'll say addExercise is actually going to dispatch addExerciseToCurrentWorkout which is really verbose. And we'll say exercise and then we'll make a new method called fetchCurrentWorkout which is just going to return dispatch(fetchCurrentWorkout)
>> Scott Moss: Which is right here.
>> Scott Moss: So now we have those, we traded this to be the async one and not the sync one and then we made a new one called fetchCurrentWorkout.
[00:05:47] So, the async one for addExercise should all ready be good, we're already using it here, so that should be fine. We actually shouldn't have to do anything here. But we want to first to work out, so when this loads up, so componentDidMount is a life cycle hook we can use in React.
[00:06:02] This function is gonna be called when the component mounts on the app the first time. So we can just uncomment that. And we can say this.props.fetchCurrentWorkout which is gonna be this, it's gonna dispatch and get the current workout which if there is anything in the current workout it is going to update the current workout state or not there.
[00:06:25] The currentWorkout state. Here, which is then gonna change the props which is then gonna call it rerender. So let's save that. Let's start our server.
>> Scott Moss: And we can say json-server db.jason, cool. So, here's our path, we got a current_workout, that's the only one that we got. So now if we hit Start Workout, we get an error because.
>> Scott Moss: Why do we get an error? componentDidMount, this.fetch, I'll just refresh this I think. I think it just needs a good refreshing. There we go, yeah, it just need to be refreshed. So if we go look at the server, I'll put,
>> Scott Moss: Actually didn't, I think I got the wrong URL in here.
[00:07:26] Let's go back and look, API. Yeah, I think I got to use the IP address for some reason on my machine. Let's do that.
>> Scott Moss: Here we go.
>> Scott Moss: And let's reload.
>> Scott Moss: Okay, now let's look. So there we go, it did a fetch on the current_workout, it did a 200, and that happened because in the Current Workout we said componentDidMount fetchCurrentWorkout.
[00:08:10] And that didn't return anything so there is nothing here. So let's actually add some workouts.
>> Scott Moss: And we'll say lunges, we're gonna add lunges here, so we'll click lunges. Cannot read property render or name on the find renderRow. Workout list.
>> Scott Moss: exercise.name.
>> Scott Moss: What are you talking about?
>> Scott Moss: I don't know what the error was but it definitely said it's a survey and loaded back up here. I think I just clicked too many times and it was freaking out because it wasn't closing. Let's try that again. So we clicked this. Let's put flat dumbbell.
>> Scott Moss: What is that?
>> Scott Moss: That's weird, it's like errored out but it's still working at the same time. Let's check out the error. Everybody following me so far? That's basically all the changes we have to do. There's just some small errors in my JSX, I need to fix. That's obviously breaking somewhere but the Redux stuff is working perfectly fine.