Check out a free preview of the full Advanced State Management in React (feat. Redux and MobX) course:
The "Get Items from Asynchonous API" Lesson is part of the full, Advanced State Management in React (feat. Redux and MobX) course featured in this preview video. Here's what you'd learn in this lesson:

Get initial API items asynchonously.

Get Unlimited Access Now

Transcript from the "Get Items from Asynchonous API" Lesson

[00:00:03]
>> Steve Kinney: It's in the database. What we wanna do is now, when we load the page, we wanna get all of them. This one's gonna be a little bit different. Because getting all of them when we initially load the page is the only one that's not gonna be triggered by a user.

[00:00:15] All of these other action creators are gonna fire when the user does a thing. This is the only one that we fire programatically, right? Does anybody remember how we fire an action?
>> Speaker 2: Dispatch.
>> Steve Kinney: Dispatch, we call story of dispatch and we give it the action creator. So we just need to do that when the application starts up.

[00:00:34] There's a bunch of places that you could do it. If it's gonna happen on a component that is lazily loaded onto the page, you should definitely do it on a componented mount. This is the core part of our application. I'm going to keep it simple. I'm basically gonna do it when I create the store, right?

[00:00:48] But depending on the nature of your UI, you're gonna make different decisions. All right, very cool. So let's go ahead and we'll go to the store index, and we need to create this action. We don't actually have an action, we've been relying on ones in the default state actually.

[00:01:04] So let's go back to the Items actions and let's go ahead and make a getAllItems.
>> Steve Kinney: That's not really gonna need an argument but it is going to call Api.getAll and that is going to come back.
>> Steve Kinney: Cool, and we'll need to create an update all items as well, cuz I don't think I have that one.

[00:01:40] But I think if I'm smart,
>> Steve Kinney: Nope, I need to make it, so we'll export, const UPDATE_ALL_ITEMS.
>> Steve Kinney: Cool, let's update that reducer real quick, if we find that one we'll say, if (action type === UPDATE_ALL_ITEMS) then we want to return action.items. So this will replace the state, we've gotten stuff back from the server, whatever was in the UI we're replacing, this could be like a hard refresh of data from the server.

[00:02:28] All right cool, so now we can go back into our items actions. And so we get all the items and then this is going to be return dispatch and then we will say dispatch.
>> Steve Kinney: type: UPDATE_ALL_ITEMS and the value is going to be the items we got back from the server.

[00:03:09] Cool, so we have this in place. This is what we'll do when the store loads. So I have index store and I'm basically going to say,
>> Steve Kinney: Or to pull in that action. We'll say import getAllItems
>> Steve Kinney: Right, so that is destructured, it's a named export. And we'll say,

[00:03:43]
>> Steve Kinney: store.dispatch(getAllItems()). All right, here's hoping. Hey, we pulled it out. So now when we connect, we immediately dispatch giving all the items, that triggers the API request, right? Which then dispatches a thunk, which, when that promise resolves, dispatches the final action to update the UI. Right, so now we can add an item and we can get all of them from the server.

[00:04:15] We just have a few more that we need to implement, and it's gonna be smooth sailing from here.