Check out a free preview of the full Advanced Redux with Redux Toolkit course
The "fetchTasks Pending State" Lesson is part of the full, Advanced Redux with Redux Toolkit course featured in this preview video. Here's what you'd learn in this lesson:
Steve handles the pending state for the asynchronous request. A loading property is added to the state. The builder adds the additional case to the extraReducers property.
Transcript from the "fetchTasks Pending State" Lesson
[00:00:00]
>> So, and that's, yeah?
>> The set loader thing, you would also put in the reducer, right?
>> Yeah, let's do it. Let's do it, why not? Let's live code. Okay, so here we go, let's do it. So here we're entities. Let's say that loading is false, cuz we do want to kick it off.
[00:00:22]
A lot of times we cheat where when we do in our React does we assume that it hasn't loaded yet, we start you state load, loading is true, and then turn it off, right? Maybe you're better than me. But we'll start to false, we do. The one kind of thing that I'm gonna do here is I am gonna say that is optional prop.
[00:00:45]
Cuz I have like my one test and it's passing right now, and it doesn't really know. I don't need TypeScript behind me so I will say that it's an optional proposition, it'll be a Boolean if it exists. Cool, we don't need this anymore. This is again from the fake API, that's the same data.
[00:01:07]
So we've got all that in place, and this will get called. And so one thing I might do is yeah, I will I would do this point if I wanted to answer question is, I would say builder. And I'm only putting it above not because order operations matters, but for me as a human, that order matters, Redux don't care.
[00:01:30]
I would say fetch tasks, Pending-
>> Just do it in the other fetch?
>> I don't have to, right? Like that action creator is gonna fire its own pending action. If we look at it, like in the tools, it fired a pending action that's going through the Reducer anyway.
[00:01:54]
It's already doing all that for me. When I kick off that fetch test, it immediately fires the pending action. It immediate, like, then when it resolves or rejects, fires the end state one. So then I just say like, cool, these things are all happening. Anything that cares about any of these things can respond as it wants to, but I don't have to.
[00:02:17]
>> Is there a risk with what you did with imperatively calling stored that dispatch? Let's say, what if, for example, the promise comes back earlier than the UI is ready to accept the events?
>> So the UI is only going to call useSelector when it's ready, right?
>> Yes.
[00:02:37]
>> So that object will be ready to go. Yeah, look who mounted. Here's that data, I had it waiting for you, right? And so that's kind of what we said before which is with use effect, you've waited for the entire UI to render, let's get some data.
>> Since this is gonna get you, since this is the reference to the store is gonna be single [CROSSTALK]
[00:02:55]
>> Yeah, the store, that's the cool thing about Redux is that exists completely agnostic of React. React is like all React Redux does is passes a story which may or may not already have the data that it already got. And then those Redux hooks grab in and say, you got anything for me?
[00:03:12]
Yeah, I already loaded it, dude, it's ready. Yeah, totally works. What was I saying? Pending, and so here we'll say, I see. Yeah it's just a builder case above the previous one. I put it above there cuz it's like one-
>> My fulfilled is where you'll switch it back to false, right?
[00:03:34]
>> Exactly.
>> Yeah, okay.
>> Yeah.
>> That's where I was.
>> And so here we'll say, This is why that stuff becomes real nice. I don't have to like spread the state or they just say, yeah, that is true. All right, you can get what the action is.
[00:04:02]
Cool, and that should all flow through. And let's go add some kind of, I mean, the nice part is to show you the tools. I can look at a net, I can look at the state where loading was false, pending happen, loading got set to True, Fulfilled happened.
[00:04:27]
Loading down here. Somewhere after there's a lot of tasks. I know it's somewhere in there.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops