mobx-angular

WebJar for mobx-angular

License

License

MIT
Categories

Categories

Angular User Interface Web Frameworks
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

mobx-angular
Last Version

Last Version

2.1.1
Release Date

Release Date

Type

Type

jar
Description

Description

mobx-angular
WebJar for mobx-angular
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/mobxjs/mobx-angular

Download mobx-angular

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/mobx-angular/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>mobx-angular</artifactId>
    <version>2.1.1</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/mobx-angular/
implementation 'org.webjars.npm:mobx-angular:2.1.1'
// https://jarcasting.com/artifacts/org.webjars.npm/mobx-angular/
implementation ("org.webjars.npm:mobx-angular:2.1.1")
'org.webjars.npm:mobx-angular:jar:2.1.1'
<dependency org="org.webjars.npm" name="mobx-angular" rev="2.1.1">
  <artifact name="mobx-angular" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='mobx-angular', version='2.1.1')
)
libraryDependencies += "org.webjars.npm" % "mobx-angular" % "2.1.1"
[org.webjars.npm/mobx-angular "2.1.1"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

Build Status npm version

mobx-angular

MobX connector for Angular (versions 2-9)

If you're looking for the Angular 1 version version, it's here

Why MobX?

Angular's change detection is great, but it updates the entire UI on every change, and doesn't have any knowledge of how our components use our services.
MobX automatically knows what properties your components use from the stores and listens to changes. It allows you to automatically react to changes and update only the parts of the UI that need to be updated, making your app performant.
With MobX you manage your app's state using mutable objects and classes. It also helps you create computed values and side-effects.

Learn more about MobX

This library

  1. Automatically observe all the observables that your component uses
  2. Automatically runs change detection - works great with OnPush strategy
  3. Disposes of all the observers when the component is destroyed

Usage

Install:

$ npm install --save mobx-angular mobx

Import the MobxAngularModule:

import { MobxAngularModule } from 'mobx-angular';

@NgModule({
    imports: [..., MobxAngularModule]
})
export class MyModule {}

autorun

Use *mobxAutorun directive in your template:

import { Component, ChangeDetectionStrategy } from '@angular/core';
import { store } from './store/counter';

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div *mobxAutorun>
      {{ store.value }} - {{ store.computedValue }}
      <button (click)="store.action">Action</button>
    </div>
  `
})
export class AppComponent {
    store = store;
}

The directive will do the following:

  • Observe all the observables / computed values that your component uses
  • Automatically run the detectChanges method whenever there's a relevant change

Under the hood, this magic happens by running autorun(() => view.detectChanges())

Why directive and not decorator?

In order to inject the change detector, and implement lifecycle hooks like ngOnDestroy, this library uses a directive, which is the most elegant solution in Angular. It also has the benefit of allowing you to easily have multiple observed sections of your component's template, in case it is required.

detach

You can improve your component's performance by detaching it from CD (Change Detection), by supplying *mobxAutorun="{ detach: true }".

This might cause things to stop updating. You have 3 options to manage that:

  • Define local component properties as observables or computed values
  • Surround with *mobxAutorun only the parts that actually use observable / computed values from the store
  • Instead of detaching, use OnPush CD strategy on the component

reaction

Aside from autorun, MobX allows you to react to specific data changes.

Usage:

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<div *mobxReaction="getParity.bind(this)">
    {{ parity }}
  </div>`
})
class AppComponent {
  getParity() {
    return this.parity = store.counter % 2 ? 'Odd' : 'Even';
  }
}

The callback function will automatically re-run whenever any observable that it uses changes. Change Detection will run automatically whenever the return value of callback changes. If you don't return anything, change detection will not run.

In this example, the parity property will be updated according to counter, and change detection will run only when the parity changes.

Injectable stores

You can easily make your stores injectable:

import { observable, action } from 'mobx-angular';

@Injectable()
class Store {
  @observable value;
  @action doSomething() { ... }
}

Using with OnPush or ngZone: 'noop'

To achieve great performance, you can set OnPush change detection strategy on your components (this can be configured as default in .angular-cli.json). MobX will run change detection manually for you on the components that need to be updated.

  • In Angular 5 there's a new option, which is to disable Zone completely when bootstrapping the app (ngZone: 'noop'). Please note that this means that all 3rd-party components will stop working (because they rely on change detection to work via Zone).

Debugging MobX (only for mobx-angular versions 2.X and below)

mobx-angular comes with a handy debug tool. To turn on / off the debug tool, open developer tools' console, and run:

mobxAngularDebug(true) // turn on
mobxAngularDebug(false) // turn off

Then you can right-click on the components that use mobx directives, and you will see a console log of the components' dependencies. Also, every action that happens in mobx will be console.logged in a nice way.

TBD - support debugging for MobX 4

AoT

Some people complained about AoT when using mobx decorators inside components. In case you do that - we export a proxy to the decorators from mobx-angular, which should be AoT compatible, e.g.:
import { observable, computed } from 'mobx-angular'

DevTools

Check out projects/todo for an example of how to use mobx-remotedev with Angular:

$ npm install mobx-remotedev

// app.module.ts
import remotedev from 'mobx-remotedev';
import { Todos } from './stores/todos.store';

@NgModule({
  ...
  providers: [
    { provide: Todos, useClass: remotedev(Todos, { global: true }), deps: [] }
  ],
})

Examples

See the projects folder, specifically these files:
/projects/todo/src/app/stores/todos.store.ts
/projects/todo/src/app/app.component.ts

To run the examples, clone this repo and run:

$ npm install -g @angular/cli
$ npm install
$ npm run build
$ npm run start <example> # for example `npm run start todo`
org.webjars.npm

MobX

Simple, scalable state management

Versions

Version
2.1.1
1.5.0