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

Description

Apply functional Reactive programming for simple and scalable state management with MobX Key FeaturesThe easiest way to learn MobX to enhance your client-side state-managementUnderstand how the concepts and components fit togetherWork through different state management scenarios with MobXBook 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 learnExplore the fundamental concepts of MobX, such as observables, actions, and reactionsUse observables to track state and react to its changes with validations and visual feedback (via React Components)Create a MobX observable from different data typesDefine form data as an observable state and tackle sync and async form validationsUse the special APIs to directly manipulate observables, tracking its changes, and discovering the reasons behind a changeTackle any state management issue you may have in your app by combining mobx-utils and mobx-state-treeExplore the internals of the MobX reactive system by diving into its inner workingsWho 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 ContentsIntroduction to State ManagementObservables, Actions, and ReactionsA React App with MobXCrafting the Observable treeDerivations, Actions and ReactionsHandling Real-World Use CasesSpecial API for Special CasesExploring mobx-utils and mobx-state-treeMobx Internals 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