Check out a free preview of the full Advanced State Management in React (feat. Redux and MobX) course:
The "MobX Review and Asynchronous" 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:

Review of MobX and overview of how to accomplish asynchronous MobX.

Get Unlimited Access Now

Transcript from the "MobX Review and Asynchronous" Lesson

>> Steve Kinney: So we have all the functionality built. There's something I want to draw your attention to, which is, think about what the application component looked like at the beginning of when we first built this application. And like, there's a lot in this file, but these would all likely be their own file.

[00:00:21] You open a file, and this is what you see, or this one, but this is effectively our application. And think about that when we're looking at the least common ancestor, and were we decide to keep the state, and how we pass things down and around. We don't necessarily need to do that anymore, we can build our UI and basically build these pieces that manage the state really well, and then arrange our UI, and in a way that's really flexible, right.

[00:00:45] Cuz all of a sudden if a component that was getting stuff three layers down the tree, moves to a different branch of the tree, you don't have to unwire all of that, and rewire it back down, right? You simply can move that component to a different part of the user interface, I think it's really powerful.

[00:01:02] With this, we're also, like, we shouldn't just manipulate the objects themselves and they will re-render the DOM. So I just want to talk about a few last things.
>> Steve Kinney: I'm going to briefly just kind of mention how Async works with Mabex, which is effectively when the action happens you can call the promise, and when it resolves change the object, right?

[00:01:28] So you've got a method that is, for instance, toggle, it can send out the APR request, and do it either when it comes back, or it can do it optimistically. There's not really any special magic that you have to do to get that working. You're just simply going to do it the way you would normally do it to change the object, and that will reflect itself in the state.

[00:01:47] The bigger problem is that you have to solve them are to figure out how the user interface acts. Do you do it optimistically, do you show a loading indicator? What other things that you need to change and put stuff together, but the actual implementation of it is incredibly simple.