MobX

MobX

  • API Reference
  • 中文
  • Sponsors
  • GitHub

›Introduction

Introduction

  • README
  • About this documentation
  • Installation
  • The gist of MobX

MobX core

  • Observable state
  • Actions
  • Computeds
  • Reactions {🚀}

MobX and React

  • React integration
  • React optimizations {🚀}

Tips & Tricks

  • Defining data stores
  • Understanding reactivity
  • Subclassing
  • Analyzing reactivity {🚀}
  • Computeds with arguments {🚀}
  • MobX-utils {🚀}
  • Custom observables {🚀}
  • Lazy observables {🚀}
  • Collection utilities {🚀}
  • Intercept & Observe {🚀}

Fine-tuning

  • Configuration {🚀}
  • Enabling decorators {🚀}
  • Migrating from MobX 4/5 {🚀}
Edit

Installation

MobX works in any ES5 environment, which includes browsers and NodeJS.

There are two types of React bindings, mobx-react-lite supports only functional components, whereas mobx-react also supports class based components. Append the appropriate bindings for your use case to the Yarn or NPM command below:

Yarn: yarn add mobx

NPM: npm install --save mobx

CDN: https://cdnjs.com/libraries/mobx / https://unpkg.com/mobx/dist/mobx.umd.production.min.js

Use spec compliant transpilation for class properties

⚠️ Warning: When using MobX with TypeScript and Babel, and you plan to use classes; make sure to update your configuration to use a TC-39 spec compliant transpilation for class fields, since this is not the default. Without this, class fields cannot be made observable before they are initialized.

  • For Babel: Make sure to use at least version 7.12. Use the plugin ["@babel/plugin-proposal-class-properties", { "loose": false }]
  • For TypeScript, set the compiler option "useDefineForClassFields": true

MobX on older JavaScript environments

By default, MobX uses proxies for optimal performance and compatibility. However, on older JavaScript engines Proxy is not available (check out Proxy support). Examples of such are Internet Explorer (before Edge), Node.js < 6, iOS < 10, Android before RN 0.59, or Android on iOS.

In such cases, MobX can fallback to an ES5 compatible implementation which works almost identically, although there are a few limitations without Proxy support. You will have to explicitly enable the fallback implementation by configuring useProxies:

import { configure } from "mobx"

configure({ useProxies: "never" }) // Or "ifavailable".

MobX and Decorators

If you have used MobX before, or if you followed online tutorials, you probably saw MobX with decorators like @observable. In MobX 6, we have chosen to move away from decorators by default, for maximum compatibility with standard JavaScript. They can still be used if you enable them though.

MobX on other frameworks / platforms

  • MobX.dart: MobX for Flutter / Dart
  • lit-mobx: MobX for lit-element
  • mobx-angular: MobX for angular
  • mobx-vue: MobX for Vue
← About this documentationThe gist of MobX →
  • Use spec compliant transpilation for class properties
  • MobX on older JavaScript environments
  • MobX and Decorators
  • MobX on other frameworks / platforms
MobX
Docs
About MobXThe gist of MobX
Community
GitHub discussions (NEW)Stack Overflow
More
Star