Sync the UI with the app state using MobX observable and observer in React

Analyze React components with MobX-React devtools

Derive computed values and manage side effects with MobX reactions

Use observable objects, arrays, and maps to store state in MobX

Use MobX actions to change and guard state

Pass observable data through props in MobX

Handle user input and asynchronous actions with MobX

Connect MobX observer components to the store with the React Provider

Write custom MobX reactions with when and autorun

Manage Complex State in React Apps with MobX

In this lesson we will finally do something useful with our temperatures. We extend it into a small app in which users can enter a location, which is used as input for an external API to fetch weather data. In the mean time MobX keeps our UI in sync with the current state of the request.

[00:00] Let's do something useful with these temperatures. Let's build a small application that helps us picking the best spot for a holiday. Let's give each temperature a location and make sure that we boss that one in our constructor instead.

[00:19] These default values don't make any sense anymore. Let's remove them. Let's add a new component in which we can input a new temperature. We pass the current set of temperatures so that we can add one. We define the new temperature input component.

[00:42] This component has one piece of state, the input of the user. We use observable to declare its state so that the component will react whenever this state changes. This component turns this number list item in a simple input box and a button.

[01:03] The event handlers again are pretty straightforward actions. Don't change input handler. Simply copies the value of the inputs into the input state and also meet handler adds the new temperature, sets the location to the current input, and clears the input again.

[01:22] Finally, we also have to adjust our temperature view components because it wants to enter the location as well. If it does that you see that we can simply add locations, but all locations still have a temperature of 25 degrees because we didn't do anything yet with the location.

[01:44] Luckily, there's a freely available API by openweathermap.org and we use that API to map our location to the actual current temperature so that we can find a nice location for a holiday.

[02:00] Before we add a fetch action we first introduce some additional state, namely loading, so that we can track whether we already have loaded our temperature. After construction we simply invoke the fetch action, and the fetch action takes the current location and resolves it to a temperature.

[02:21] We use a browser fetch API for that, and we call the endpoints. We inject an API key we got from the servers, and we add our location as search query using template strings.

[02:38] Fetch returns a promise and once the promise resolves we obtain the JSON which is internal. Again a promise, and once that promise is resolved we take our action to update the state.

[02:54] The temperature returned by that service is in the degrees Fahrenheit. We fix that be converting it back to Celsius, and we simply say that are done loading. The idea here is that asynchronous processes aren't anything complicated.

[03:07] An asynchronous process just executes an action in a lower point of time. It's nothing more than that. We just assume that [inaudible] as usually.

[03:16] Finally, we should deal with the fact that data might be loading in the temperature view. Let's show temperature only if we have fetched our data and otherwise show that we are loading. Let's run this.

[03:32] Let's try some locations for our holiday. Let's try Amsterdam or London. Our promises have returned, but the temperature isn't promising. Lt's try something more radical, the Bahamas. That's what I like.

[03:51] What we see is that if our asynchronous actions modify the states that is automatically reflected in our components. Asynchronous actions are actually just two synchronous actions, one at the moment you start them, and one when they finish.

Course

Manage Complex State in React Apps with MobX

Handle user input and asynchronous actions with MobX

Share this video with your friends