MobX Quick Start Guide

MobX Quick Start Guide

by Pavan Podila, Michel Weststrate
Released July 2018
Publisher(s): Packt Publishing
ISBN: 9781789344837

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Apply functional Reactive programming for simple and scalable state management with MobX

Key Features

  • The easiest way to learn MobX to enhance your client-side state-management
  • Understand how the concepts and components fit together
  • Work through different state management scenarios with MobX

Book Description

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.

What you will learn

  • Explore the fundamental concepts of MobX, such as observables, actions, and reactions
  • Use observables to track state and react to its changes with validations and visual feedback (via React Components)
  • Create a MobX observable from different data types
  • Define form data as an observable state and tackle sync and async form validations
  • Use the special APIs to directly manipulate observables, tracking its changes, and discovering the reasons behind a change
  • Tackle any state management issue you may have in your app by combining mobx-utils and mobx-state-tree
  • Explore the internals of the MobX reactive system by diving into its inner workings

Who this book is for

This book is for web developers who want to implement easy and scalable state management for their apps. Knowledge of HTML, CSS, and JavaScript is assumed

Table of contents

  1. Title Page
  2. Copyright and Credits
    1. MobX Quick Start Guide
  3. Dedication
  4. Packt Upsell
    1. Why subscribe?
    2. PacktPub.com
  5. Foreword
  6. Contributors
    1. About the authors
    2. About the reviewer
    3. Packt is searching for authors like you
  7. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
      1. Download the example code files
      2. Download the color images
      3. Code in Action
      4. Conventions used
    4. Get in touch
      1. Reviews
  8. Introduction to State Management
    1. The client state
      1. Handling changes in state
    2. The side effect model
    3. A speed tour of MobX
      1. An observable state
      2. Observing the state changes
      3. It's time to take action
      4. A comparison with Redux
        1. Redux in a nutshell
        2. MobX versus Redux
    4. Summary
  9. Observables, Actions, and Reactions
    1. Technical requirements
    2. Observables
      1. Creating observables
      2. Observable arrays
      3. Observable maps
      4. A note on observability
      5. The computed observable
      6. Better syntax with decorators
    3. Actions
      1. Enforcing the use of actions
      2. Decorating actions
    4. Reactions
      1. autorun()
      2. reaction()
        1. A reactive UI
      3. when()
        1. when() with a promise
      4. Quick recap on reactions
    5. Summary
  10. A React App with MobX
    1. Technical requirements
    2. The book search
    3. Observable state and actions
      1. Managing the async action
    4. The Reactive UI
      1. Getting to the store
      2. The SearchTextField component
      3. The ResultsList component
    5. Summary
  11. Crafting the Observable Tree
    1. Technical requirements
    2. The shape of data
    3. Controlling observability
      1. Using @decorators
        1. Creating shallow observables with @observable.shallow
        2. Creating reference-only observables with @observable.ref
        3. Creating structural observables with @observable.struct
      2. Using the decorate() API
        1. Decorating with observable()
      3. Extending the observability
    4. Derived state with @computed
      1. Structural equality
    5. Modeling the stores
      1. Observable state
      2. Derived state
      3. Actions
    6. Summary
  12. Derivations, Actions, and Reactions
    1. Technical requirements
    2. Derivations (computed properties)
      1. Is it a side effect?
      2. There's more to computed()
      3. Error handling inside computed
    3. Actions
      1. Why an action?
      2. Async actions
        1. Wrapping with runInAction()
        2. flow()
    4. Reactions
      1. Configuring autorun() and reaction()
        1. Options for autorun()
        2. Options for reaction()
      2. When does MobX react?
        1. The rules
    5. Summary
  13. Handling Real-World Use Cases
    1. Technical requirements
    2. Form validation
      1. The interactions
      2. Modeling the observable state
      3. Onto the actions
      4. Completing the triad with reactions
      5. React components
        1. The UserEnrollmentForm component
        2. Other observer components
    3. Page routing
      1. The Cart checkout workflow
      2. Modeling the observable state
        1. A route for a step, a step for a route
        2. The WorkflowStep
      3.  Actions and reactions of the workflow
        1. Loading a step
        2. The HistoryTracker
      4. The React components
        1. The TemplateStepComponent
        2. The ShowCart component
        3. A state-based router
    4. Summary
  14. Special API for Special Cases
    1. Technical requirements
    2. Direct manipulation with the object API
      1. Granular reads and writes
        1. From MobX to JavaScript
    3. Watching the events flow by
      1. Hooking into the observability
        1. Lazy loading the temperature
      2. Gatekeeper of changes
        1. Intercepting the change
      3. observe() the changes
    4. Development utilities
      1. Using spy() to track the reactivity
      2. Tracing a reaction
      3. Visual debugging with mobx-react-devtools
    5. A few other APIs
      1. Querying the reactive system
      2. Probing deeper into the reactive system
    6. Summary
  15. Exploring mobx-utils and mobx-state-tree
    1. Technical requirements
    2. The utility functions of mobx-utils
      1. Visualizing async-operations with fromPromise()
      2. Using lazyObservable() for deferred updates
        1. A generalized lazyObservable() with fromResource()
      3. A view model to manage edits
      4. There is lot more to discover
    3. An opinionated MobX with mobx-state-tree
      1. Models – properties, views, and actions
        1. Defining actions on the model
        2. Creating derived information with views
      2. Fine-tuning primitive types
      3. Composing trees
      4. References and identifiers
        1. Referencing by types.identifier() and types.reference()
      5. Out-of-the-box benefits of declarative models
        1. Immutable snapshots
        2. JSON patches
        3. Middlewares
      6. Further reading
    4. Summary
  16. Mobx Internals
    1. Technical requirements
    2. A layered architecture
      1. The Atom
        1. Reading atoms at runtime
      2. Creating an Atom
        1. The atomic clock example
      3. ObservableValue
      4. ComputedValue
        1. Efficient computation
      5. Derivation
        1. The cycle of derivation
        2. Exception handling
      6. The API layer
    3. Transparent functional reactive programming
      1. It is Transparent...
      2. It is reactive...
      3. It is functional...
      4. Value Oriented Programming
    4. Summary
  17. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think

Product information

  • Title: MobX Quick Start Guide
  • Author(s): Pavan Podila, Michel Weststrate
  • Release date: July 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781789344837