product iamge

MobX Quick Start Guide: Supercharge the client state in your React apps with MobX

This document was uploaded by one of our users. The uploader already confirmed that they had the permission to publish it. If you are author/publisher or own the copyright of this documents, please report to us by using this DMCA report form.

Download
Search on Amazon

Simply click on the Download Book button.

Yes, Book downloads on Ebookily are 100% Free.

Sometimes the book is free on Amazon As well, so go ahead and hit "Search on Amazon"

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. Introduction to State Management
  2. Observables, Actions, and Reactions
  3. A React App with MobX
  4. Crafting the Observable tree
  5. Derivations, Actions and Reactions
  6. Handling Real-World Use Cases
  7. Special API for Special Cases
  8. Exploring mobx-utils and mobx-state-tree
  9. Mobx Internals

Author(s): Pavan Podila, Michel Weststrate
Publisher: Packt Publishing
Year: 2018

Language: English
Pages: 236

Cover
Title Page
Copyright and Credits
Dedication
Packt Upsell
Foreword
Contributors
Table of Contents
Preface
Chapter 1: 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
Chapter 2: 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
Chapter 3: 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
Chapter 4: 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
Chapter 5: 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
Chapter 6: 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
Chapter 7: 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
Chapter 8: 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
Further reading
Summary
Chapter 9: Mobx Internals
Technical requirements
A layered architecture
The Atom
Reading atoms at runtime
Creating an Atom
The atomic clock example
ObservableValue
ComputedValue
Efficient computation
Derivation
The cycle of derivation
Exception handling
The API layer
Transparent functional reactive programming
It is Transparent...
It is reactive...
It is functional...
Value Oriented Programming
Summary
Other Books You May Enjoy
Index