State management plays a crucial role in any application where state is relevant across different places in the code base. This is either because there are multiple consumers or multiple producers of data. In practice, this means that MobX is useful in any application that has a non-trivial amount of data entry or data visualization.

MobX has official bindings for React.js, Preact, and Angular. However, many have used the library in combination with libraries and frameworks such as jQuery, konva.js, Next.js, Vue.js, and even Backbone. When working through the book, you will discover that the concepts required to use a tool like MobX are universally applicable in any environment.

Chapter 1, Introduction to State Management, starts with a conceptual treatment of state-management and its many nuances. It introduces the side-effect model and prepares you with the philosophy needed to understand MobX. Finally, it gives a speed tour of MobX and some of its core building blocks.

Chapter 2, Observables, Actions, and Reactions, takes a deeper look at the core building blocks of MobX. It shows you the various ways of creating observables, using actions to cause mutations on the observables, and, finally, the use of reactions to react to any changes happening on the observables. These three form the core triad of MobX.

Chapter 3, A React App with MobX, combines the knowledge gained so far to power a React App with MobX. It tackles the use case of searching books in an online store. The app is built by first identifying the core observable state, using actions to mutate the state, and using reactions via the observer() utility from mobx-react. The React components are the observers that react to changes in the observable state and automatically render the new state. This chapter will give you an early taste of how simple MobX can be for state management in React apps.

Chapter 4, Crafting the Observable Tree, puts laser focus on designing the observable state with the various options in MobX. We will tackle how to limit the observability in MobX and learn how to create a tight observable state that only observes the necessary and nothing more. In addition to limiting observability, we will also see how to expand the observability with extendObservable(). Finally, we will look into computed properties and look at the use of ES2015 classes to model the observable state.

Chapter 5, Derivations, Actions, and Reactions, goes further into the core building blocks of MobX and explores the API in greater detail. It also touches upon the philosophies governing these building blocks. By the end of this chapter, you will cement your understanding and core intuitions around MobX.

Chapter 6, Handling Real-World Use Cases, is where we apply MobX to two important real-world use cases: form handling and page routing. Both are very visual in nature, but we will argue that they can be dealt with much more easily when represented as observable state, actions, and reactions in MobX. This representation makes the React components (the observers) a natural visual extension of the state. We will also develop our core intuitions around state modelling with MobX.

Chapter 7, Special API for Special Cases, is a survey of APIs that are low level and capable but hide in the shadows of the top-level APIs. such as observable(), action(), computed(), and reaction(). We will explore these low-level APIs and then take a brief tour of the debug utilities available for MobX developers. It is comforting to know that MobX has your back from all angles, even in those rare, odd cases.

Chapter 8, Exploring mobx-utils and mobx-state-tree, gives you a taste of some useful packages that can simplify the everyday use cases encountered in MobX-driven development. As the name suggests, mobx-utils is a utility tool belt containing an assortment of functions. On the other hand is the powerful mobx-state-tree, commonly referred to as MST, that prescribes an approach for scalable MobX applications, baking in patterns that you get for free, once you adopt the MST style of thinking. It is a worthy upgrade to MobX and a must-have for serious users.

Chapter 9, MobX Internals, is where we culminate by peeling off the layers and peeking into the inner workings of MobX. The core abstractions are surprisingly simple and well defined, and they neatly separate the responsibilities. If the term transparent functional reactive programming sounds like a black art, this is the chapter that will unravel the magic and reveal how MobX embraces it. This chapter is also an initiation into the MobX code base and a worthy read for anyone aspiring to be a core contributor to the MobX project.

MobX is typically used in programming environments where long-living, in-memory state plays an important role, most notably web, mobile, and desktop applications. The book requires basic understanding of the JavaScript programming language, and will use modern ES2015 syntax in its examples. Frontend examples are based on the ReactJS framework, so some familiarity with it will be useful, but it's not necessary.

connect(mapStateToProps, mapDispatchToProps, mergeProps, options)(Component)

import { observable, autorun, action } from 'mobx';

let cart = observable({
itemCount: 0,
modified: new Date(),
});

$ mkdir css
$ cd css

Feedback from our readers is always welcome.

General feedback: Email [email protected] and mention the book title in the subject of your message. If you have questions about any aspect of this book, please email us at [email protected].

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.

Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.