MobX Quick Start Guide · Supercharge the Client State in Your React Apps With MobX by Podila, Pavan -- Read -- Imperial Library of Trantor

Index

Title Page Copyright and Credits

MobX Quick Start Guide

Dedication Packt Upsell

Why subscribe? PacktPub.com

Foreword Contributors

About the authors About the reviewer Packt is searching for authors like you

Preface

Who this book is for What this book covers To get the most out of this book

Download the example code files Download the color images Code in Action Conventions used

Get in touch

Reviews

Introduction to State Management

The client state

Handling changes in state

The side effect model A speed tour of MobX

An observable state Observing the state changes It's time to take action A comparison with Redux

Redux in a nutshell MobX versus Redux

Summary

Observables, Actions, and Reactions

Technical requirements Observables

Creating observables Observable arrays Observable maps A note on observability The computed observable Better syntax with decorators

Actions

Enforcing the use of actions Decorating actions

Reactions

autorun() reaction()

A reactive UI

when()

when() with a promise

Quick recap on reactions

Summary

A React App with MobX

Technical requirements The book search Observable state and actions

Managing the async action

The Reactive UI

Getting to the store The SearchTextField component The ResultsList component

Summary

Crafting the Observable Tree

Technical requirements The shape of data Controlling observability

Using @decorators

Creating shallow observables with @observable.shallow Creating reference-only observables with @observable.ref Creating structural observables with @observable.struct

Using the decorate() API

Decorating with observable()

Extending the observability

Derived state with @computed

Structural equality

Modeling the stores

Observable state Derived state Actions

Summary

Derivations, Actions, and Reactions

Technical requirements Derivations (computed properties)

Is it a side effect? There's more to computed() Error handling inside computed

Actions

Why an action? Async actions

Wrapping with runInAction() flow()

Reactions

Configuring autorun() and reaction()

Options for autorun() Options for reaction()

When does MobX react?

The rules

Summary

Handling Real-World Use Cases

Technical requirements Form validation

The interactions Modeling the observable state Onto the actions Completing the triad with reactions React components

The UserEnrollmentForm component Other observer components

Page routing

The Cart checkout workflow Modeling the observable state

A route for a step, a step for a route The WorkflowStep

 Actions and reactions of the workflow

Loading a step The HistoryTracker

The React components

The TemplateStepComponent The ShowCart component A state-based router

Summary

Special API for Special Cases

Technical requirements Direct manipulation with the object API

Granular reads and writes

From MobX to JavaScript

Watching the events flow by

Hooking into the observability

Lazy loading the temperature

Gatekeeper of changes

Intercepting the change

observe() the changes

Development utilities

Using spy() to track the reactivity Tracing a reaction Visual debugging with mobx-react-devtools

A few other APIs

Querying the reactive system Probing deeper into the reactive system

Summary

Exploring mobx-utils and mobx-state-tree

Technical requirements The utility functions of mobx-utils

Visualizing async-operations with fromPromise() Using lazyObservable() for deferred updates

A generalized lazyObservable() with fromResource()

A view model to manage edits There is lot more to discover

An opinionated MobX with mobx-state-tree

Models – properties, views, and actions

Defining actions on the model Creating derived information with views

Fine-tuning primitive types Composing trees References and identifiers

Referencing by types.identifier() and types.reference()

Out-of-the-box benefits of declarative models

Immutable snapshots JSON patches Middlewares