Using MobX For FavoritedImages

At the beginning of this course, we made a choice to write all examples in JavaScript. We have come to regret that decision while working on the examples with MobX. MobX documentation uses TypeScript (TS), a JavaScript superset, which brings many advantages.

Note: We encourage learning about TS. We will not spend any more time on this topic as there are hundreds of hugely valuable TS resources both online and in course form, but we wanted to let you know in case you read the MobX documentation, that the examples look a little different from the code in this course.

Creating a model for the user

Now that we have all of this out of the way, let’s get to coding! We will create a new folder called models where we will store data models for our app. The term data models might sound very serious, but don’t worry. MobX data models are nothing more than JavaScript objects with superpowers — by which we mean to say that they look like simple JavaScript objects, but they are capable of doing much more!

When we have a couple of models ready, we will create one more file for our global MobX-managed state. We will call this file store.js and we will place all the logic for fetching and managing liked images in this file.

Let’s start by creating the simplest model: for the user. We won’t be implementing actual user state changes, but we’ll just take a quick look at what MobX models look like in real-world implementation: