Book Image

MobX Quick Start Guide

By : Pavan Podila, Michel Weststrate
Book Image

MobX Quick Start Guide

By: Pavan Podila, Michel Weststrate

Overview of this book

MobX is a simple and highly scalable state management library in JavaScript. Its abstractions can help you manage state in small to extremely large applications. However, if you are just starting out, it is essential to have a guide that can help you take the first steps. This book aims to be that guide that will equip you with the skills needed to use MobX and effectively handle the state management aspects of your application. You will first learn about observables, actions, and reactions: the core concepts of MobX. To see how MobX really shines and simplifies state management, you'll work through some real-world use cases. Building on these core concepts and use cases, you will learn about advanced MobX, its APIs, and libraries that extend MobX. By the end of this book, you will not only have a solid conceptual understanding of MobX, but also practical experience. You will gain the confidence to tackle many of the common state management problems in your own projects.
Table of Contents (17 chapters)
Title Page
Dedication
Packt Upsell
Foreword
Contributors
Preface
Index

Actions


Actions are the way to mutate the core state of your application. In fact, MobX strongly recommends that you always use actions and never do any mutations outside of an action. It even goes to the extent of enforcing this requirement across your app if you configure MobX with: { enforceActions: true }:

import { configure } from 'mobx';

configure({ enforceActions: true });

Let the preceding lines of code be the starting point of your MobX-driven React app. It's obvious that there are some benefits to using actions for all state-mutation. But so far, it hasn't been very clear. Let's drill a little deeper to uncover these hidden benefits.

Note

configure({ enforceActions: true }) isn't the only option available for guarding state-mutation. There is a stricter form with { enforceActions: 'strict' }. The difference is subtle but worth calling out. When set to true, you are still allowed to make stray mutations outside of an action, if there are no observers tracking the mutating observable...