mobx 1.2.1+2

Dart native js
Flutter Android iOS web

MobX是用于被动管理应用程序状态的库. 使用可观察的事物,动作和反应的力量来增强Dart和Flutter应用程序的性能.

Language: English | Português

mobx.dart en #



pub package Build Status Coverage Status

MobX代表Dart语言.

使用透明功能响应式编程(TFRP)增强Dart应用程序中的状态管理

Introduction #

MobX是一个状态管理库,它使将应用程序的反应性数据与UI连接起来变得很简单. 这种接线是完全自动的,感觉非常自然. 作为应用程序开发人员,您仅关注于需要在UI(和其他地方)中使用哪些反应式数据,而不必担心使两者保持同步.

它并不是真正的魔术,但是它确实对所消耗的( 可观察的 )和位置( 反应 )有一些智能,并会自动为您跟踪. 当可观察物改变时,所有反应都重新进行. 有趣的是,从简单的控制台日志,网络调用到重新呈现UI,这些反应可以是任何东西.

MobX对于JavaScript应用程序一直是非常有效的库,Dart语言的移植旨在带来相同水平的生产力.

Go deep #

要更深入地了解MobX,请查看MobX快速入门指南 . 尽管该书使用MobX的JavaScript版本,但几乎所有概念都适用于Dart和Flutter.

Core Concepts #

MobX Triad

MobX的核心是三个重要的概念: 可观察动作反应 .

Observables #

可观察值表示应用程序的反应状态. 它们可以是复杂对象树的简单标量. 通过将应用程序的状态定义为可观察的树,您可以公开UI(或应用程序中的其他观察者)使用的反应状态树 .

一个简单的反应计数器由以下可观察值表示:

import 'package:mobx/mobx.dart';

final counter = Observable(0);

More complex observables, such as classes, can be created as well.

class Counter {
  Counter() {
    increment = Action(_increment);
  }

  final _value = Observable(0);
  int get value => _value.value;

  set value(int newValue) => _value.value = newValue;
  Action increment;

  void _increment() {
    _value.value++;
  }
}

乍一看,这确实看起来像一些可以快速失控的样板代码! 这就是为什么我们在组合中添加mobx_codegen的原因 ,该组合允许您将以下代码替换为以下代码:

import 'package:mobx/mobx.dart';

part 'counter.g.dart';

class Counter = CounterBase with _$Counter;

abstract class CounterBase with Store {
  @observable
  int value = 0;

  @action
  void increment() {
    value++;
  }
}

请注意使用批注来标记类的可观察属性. 是的,这里有一些标头样板,但它适用于任何类. 当您构建更复杂的类时,样板将逐渐消失,您将主要关注括号内的代码.

注意 :注释可通过mobx_codegen软件包获得.

Computed Observables #

可以得出什么,应该得出什么. 自动地.

应用程序的状态由core-statederived-state组成 . 核心状态是您正在处理的域所固有的状态 . 例如,如果您有一个Contact实体,则firstNamelastName构成Contact核心状态 . 但是, fullName派生状态 ,是通过结合firstNamelastName获得的.

如此导出的状态下 ,依赖于核心状态其他派生状态称为已计算观察到 . 当其基础观测值更改时,它会自动保持同步.

MobX中的状态=核心状态+派生状态

import 'package:mobx/mobx.dart';

part 'counter.g.dart';

class Contact = ContactBase with _$Contact;

abstract class ContactBase with Store {
  @observable
  String firstName;

  @observable
  String lastName;

  @computed
  String get fullName => '$firstName, $lastName';

}

在上面的示例中,如果firstName和/或lastName更改,则fullName将自动保持同步.

Actions #

行动就是您如何改变可观察对象. 动作不是直接对其进行变异,而是为变异添加了语义. 例如,不仅仅是执行value++ ,而执行increment()操作具有更多含义. 此外,操作还分批处理所有通知,并确保仅在更改完成后通知更改. 因此,仅在动作的原子完成时通知观察者.

请注意,操作也可以嵌套,在这种情况下,最顶层操作完成后,通知将消失.

final counter = Observable(0);

final increment = Action((){
  counter.value++;
});

在类内创建动作时,可以利用注释!

import 'package:mobx/mobx.dart';

part 'counter.g.dart';

class Counter = CounterBase with _$Counter;

abstract class CounterBase with Store {
  @observable
  int value = 0;

  @action
  void increment() {
    value++;
  }
}

Reactions #

反应完成了MobX三元组可观察性动作反应 . 他们是反应系统的观察者,只要他们跟踪的可观察物发生变化,它们就会得到通知. 下表列出了几种反应. 它们都返回一个ReactionDisposer ,可以调用该函数来处理反应.

反应的一个显着特征是,它们无需任何明确的布线即可自动跟踪所有可观察物. 读取反应中可观察到的行为足以跟踪它!

您用MobX编写的代码似乎没有仪式性!

ReactionDisposer autorun(Function(Reaction) fn)

立即运行反应,也可以对fn内使用的可观察变量进行任何更改.

import 'package:mobx/mobx.dart';

String greeting = Observable('Hello World');

final dispose = autorun((_){
  print(greeting.value);
});

greeting.value = 'Hello MobX';

// Done with the autorun()
dispose();


// Prints:
// Hello World
// Hello MobX

ReactionDisposer reaction<T>(T Function(Reaction) fn, void Function(T) effect)

监视fn()函数内部使用的可观察对象,并在fn()函数返回不同值时运行effect() . 仅跟踪fn()内部的可观察对象.

import 'package:mobx/mobx.dart';

String greeting = Observable('Hello World');

final dispose = reaction((_) => greeting.value, (msg) => print(msg));

greeting.value = 'Hello MobX'; // Cause a change

// Done with the reaction()
dispose();


// Prints:
// Hello MobX

ReactionDisposer when(bool Function(Reaction) predicate, void Function() effect)

监视predicate()内部使用的可观察对象,并返回true 运行effect() . 运行effect()后, when自动处理自身. 因此,您可以将何时视为一次 reaction . 您也可以过早地处理when() .

import 'package:mobx/mobx.dart';

String greeting = Observable('Hello World');

final dispose = when((_) => greeting.value == 'Hello MobX', () => print('Someone greeted MobX'));

greeting.value = 'Hello MobX'; // Causes a change, runs effect and disposes


// Prints:
// Someone greeted MobX

Future<void> asyncWhen(bool Function(Reaction) predicate)

when相似,但返回Future ,这在predicate()返回true时实现 . 这是等待predicate()变为true的便捷方法.

final completed = Observable(false);

void waitForCompletion() async {
  await asyncWhen(() => _completed.value == true);

  print('Completed');
}

Observer

应用程序中最直观的反应之一就是UI. Observer小部件(它是flutter_mobx包的一部分),提供了在其builder函数中使用的可观察对象的细粒度观察builder . 只要这些可观察对象发生变化, Observer重建并渲染.

以下是完整的Counter示例.

import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:mobx/mobx.dart';

part 'counter.g.dart';

class Counter = CounterBase with _$Counter;

abstract class CounterBase with Store {
  @observable
  int value = 0;

  @action
  void increment() {
    value++;
  }
}

class CounterExample extends StatefulWidget {
  const CounterExample({Key key}) : super(key: key);

  @override
  _CounterExampleState createState() => _CounterExampleState();
}

class _CounterExampleState extends State<CounterExample> {
  final _counter = Counter();

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: const Text('Counter'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text(
                'You have pushed the button this many times:',
              ),
              Observer(
                  builder: (_) => Text(
                        '${_counter.value}',
                        style: const TextStyle(fontSize: 20),
                      )),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _counter.increment,
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        ),
      );
}

Contributing #

如果您已经阅读到这里,那么. 您可以通过几种方式为不断增长的MobX.dart社区做出贡献.

343
likes
110
pub points
98%
popularity

Publisher

dart.pixelingene.com

MobX是用于被动管理应用程序状态的库. 使用可观察的事物,动作和反应的力量来增强Dart和Flutter应用程序的性能.

Repository (GitHub)
View/report issues

Documentation

API reference

License

麻省理工学院( 授权

Dependencies

meta

More

Packages that depend on mobx

by  ICOPY.SITE