Async Thunk Data Fetch Solution

[00:00:00]
>> So actually let's review what our mission is here as well. So we just looked at in the star wars example, we have most of Rio toolkit wired up, we just needed to add the API pace. This is a little bit more of a boilerplate. We do have a fake API in this case.

[00:00:20]
In the utilities folder, there is this Fetch Dog Fact, which is gonna read from this data and shuffle through and just grab however many that we're looking for. So this is pretending to be an API on our behalf. But we'll kind of get us most of the way.

[00:00:38]
There it will return astoundingly fast. Since it's not real, versus our real network from earlier. So really we just wanna step through the pieces of wiring up a slice around these dog facts. And just kinda see it from start to finish and what we did with the humans in the tasks earlier.

[00:00:58]
And wire it up with the asynchronous stuff we just saw with the star wars piece. So, we'll go ahead, and we'll implement that, and then we'll work through it together. So now we want to create a new slice, that makes a lot of sense. So, we'll call it, dog facts slice, it's up to you.

[00:01:21]
Dog facts, no, I like facts slice. So factSlice.js, and well I will move that into my store. And here we're gonna say, Let's go ahead and we'll say const dogSlice equals createSlice. And what do we know? We know that this might be our, Let's call it our facts.

[00:01:59]
We'll say that the name here is facts in this case. We'll go get that kinda in place as well. So we'll say name is facts, initialState. We'll just make it an empty array. Now this one is really only has the asynchronous action. So we'll get to wiring up the rest of that momentarily, but we might say that let's go and we'll create our async thunk.

[00:02:39]
So let's say fetchDogFactsFromAPI. And we'll say that this is going to be facts/ fetchFacts you can call whatever you want. And we know that that's gonna take the count, how many we're looking for? If I look in utilities, I can see that it is called fetchDogFacts. Which is the only reason I named this one a little bit longer of a name.

[00:03:23]
And we'll say facts equals await and whatever the count is, and then we will return return those facts. So, that will be in the action payload. Let's go ahead, and before we even do anything with the state. Let's go ahead and just try to use this and see what we're going to get in the actual console.

[00:03:52]
So, I'm gonna create a new window over here that we'll look at in a second. Go over to Redux. You can see that all of this is in place. I'll give myself a little bit more room here as well. Let's wire it on to the button. So we'll go into our components on the DogFactsForm.

[00:04:15]
We've got dispatched, it's never used here. Let's go ahead and use it. So we'll say handle submit. When it's been submitted, we'll say, Dispatch, fetchDogFactsFromApi and then whatever the value is here. Great, and so I'm gonna go and see if that works for us. You can see it fires appending it fires the fulfilled.

[00:04:46]
Now we don't do anything with that yet. We have not hooked it up to our store. We have not updated any of the reducers, but you can see the actual thunk itself is just gonna fire these events. And what an event is fired and no one's listening kind of Eric's question earlier then what happens, nothing, right?

[00:05:03]
We are firing events. Nothing really matters. It's just kinda how we're dispatching them. There is not a single reduce in the world that cares about them. So they are just landing literally, literally nowhere. So we'll go ahead and let's get the rest of that working here. So, okay, what would it look like to update that in our state?

[00:05:24]
Well, we can do that in our Slice, where we'll say extraReducers. And what we want is this. We want that to be an object. We'll say fetchDogFactsFromApi.fulfilled. And if that happens of the state and the action. And will say state equals I think it's an array of facts we'll see.

[00:06:02]
Yeah concise, Action.payload, and then we just need to wire up this slice into our store. So we'll export this as well. And we're gonna use that combined reducers in this case will say that, That should mostly get wired up in this case. Let's see what we got. Filled, let's see what happened to our state.

[00:06:57]
We're not in there yet. The payload was the array. So we'll take a look one second. But yeah, we didn't say didn't change. We got the Action back. We can take a look at it, but nothing changed. And so still what we got there it is. All right, so the issue it was just a little bit of an emergent, which I think is super interesting to call out.

[00:07:20]
So state is the draft state. I can modify it, right? If I modify it, I will then begin to apply the changes to it. But if I outright replace it, that's not what comes out of the MapReduce. So when I said state equals is action.payload. We threw away the draft state which was a compared to the old state.

[00:07:39]
And we replaced with the action payload versus by just return that wholesale that is still a fair object. If this became than 7 array we made this facts is the array and loading was false. And then we said, state.facts equals action.payload. We wouldn't be wholesale throwing away the state object.

[00:08:10]
We would just simply be mutating it, which would then go through the draft process with Emmer instead of replacing it. Now, that's just not how the rest of the components are wired up. So if I just return the array, just like we did with the items in the very first example.

[00:08:26]
That will actually work, and it will be new state that will work in this case as well. So a lot of what redux toolkit gives us is abstractions are like is bringing in everything that we saw. It's making our action creators that we made by hand. It is bringing the action creators that we made by hand.

[00:08:47]
It's automatically associating reducer conditionals with those action types. It's normalizing the type of the actions as well It is given is wiring in the Redux Dev Tools is basically doing a lot of the boilerplate on our behalf. But however, I do think that, for a lot of things, if you're not kind of aware of all the pieces we're gonna have.

[00:09:07]
It can be real tricky and sometimes like, are you going to spend more time adding so many extra reducers? That makes way more sense to have the complete freedom of the pure JavaScript? You have a reducer function to objects go in one comes out, the answer that question really depends on what you're building, right?

[00:09:26]
And having both options on the table and deciding listen, this is pretty standard. I'm just adding stuff removing stuff. I don't wanna do all this boilerplate is a relatively small utility that we're using inside of our company. Yeah, I use redux toolkit. I know that I'm gonna do a lot of really particularly extra things.

[00:09:43]
And I might be doing so many, extra juices educations around it that it's not worth it. That's totally worth it too. I think it makes sense to kind of balance between the two and figure out which one works best for you.