reactive_state

Reactive_state

フラッターのための理解しやすいリアクティブな状態管理ソリューション。

原則

観察可能な状態

状態は、 ValueNotifierを実装するValueまたは同様のクラスの1つまたは複数のインスタンスに保持されます。これらは、誰もがTextEditingController 、 Animationなどから知っている標準的なフラッターインターフェイスです。

さらに、 ListValueとMapValueを使用して、微調整された変更イベントについて通知できる観測可能なListとMap値を作成することができます（値全体が変更されるのではなく）。

リアクティブウィジェット

AutoBuild 、 ValueNotifier （またはListenable ）が通知をトリガーすると、ウィジェットを自動的に再構築します。 FlutterのValueListenableBuilderに似ていますが、複数の依存関係を追跡することができ、 Listenableでも動作します。

addListener / removeListenerを呼び出す必要はありません。 AutoBuild依存関係の追跡に直接値get()だけです。

InheritedWidgetやProviderとは異なり、再構築されるものを細かく制御できます。

TextEditingControllerやAnimationなどの標準的なフラッタークラスは、 ValueListenable実装しているため、 AutoBuildでうまく機能します。

派生/計算された状態

DerivedValue 、他の観測可能な値から計算（導出）される観測可能な値です。

また、 ListValueとMapValue 、要素ごとに更新される派生コンテナを作成するための.map()およびその他の操作を提供します。

より少ないボイラープレートと間接

結果のコードは、ブロックまたはreduxの同じソリューションよりもはるかに簡単です。

• ストリーム、 StreamBuilder 、ウィジェットの非同期負荷はありません（実際に必要な場合を除く）。
• 特別なイベントオブジェクト、Long switch()ステートメントを備えたイベントハンドラーはありません。

使用法

注：詳細については、参照も参照してください。

シンプルなAutoBuild例：

 import 'package:flutter/material.dart' ;
import 'package:reactive_state/reactive_state.dart' ;

class MyPage extends StatelessWidget {
  MyPage ({ Key key, @required this .counter}) : super (key : key);

  final ValueNotifier < int > counter;

  @override
  Widget build ( BuildContext context) {
    return Scaffold (
      appBar : AppBar (title : Text ( 'Counter' )),
      body : Column (
        children : < Widget > [
          AutoBuild (builder : (context, get , track) {
            return Text ( 'Counter: ${ get ( counter )}' );
          }),
          MaterialButton (
            onPressed : () => counter.value ++ ,
            child : Text ( 'Increment' ),
          ),
        ],
      ),
    );
  }
}

実際のアプリケーションでは、状態を直接変異させるべきではなく、プロバイダーパッケージを介してアクセスできるオブジェクトに別々の方法にそれを配置する必要があることに注意してください。

また、リポジトリの例をご覧ください。

AutorunとAutorunner

ウィジェットの外では、状態の変化に反応したい場合があります。 autoRun()とAutoRunnerでそれを行うことができます（詳細については、参照を参照）。

値とValueNotifier

ValueNotifierの代替品として、より複雑なオブジェクトを変更するためのupdate()メソッドを提供するreactive_stateのValueクラスを使用することもできます。

 class User {
  String name = '' ;
  String email = '' ;
  // ...
}

var userValue = Value ( User ());
userValue. update ((user) {
  user.name = 'Adam' ;
  user.email = '[email protected]' ;
});

これは、 StatefulWidgetを使用してsetState()を呼び出すことに似ています。 update()を使用すると、複数の属性を変更でき、 Value終了したら単一の通知をトリガーします - 何も変更されていなくても（複雑なオブジェクトの比較演算子を実装する必要はありません）。

derivedValue

DerivedValue 、依存関係が変更されるたびにその値を更新する動的に計算されたValueListenableです。

 var user = Value ( User ());
var emailLink = DerivedValue (( get , track) => 'mailto:${ get ( user ). email }' );

ここでは、 emailLinkそれ自体で観察でき、 userが変更されるたびに更新されます。

ListValueとMapValue

できることを示す簡単な例：

 final listValue = ListValue ( < int > []);
final mappedList = listValue. map ((x) => x. toString ());
final listToMap = mappedList. toMap ((x) => MapEntry ( 2 * int . parse (x), x));
final invertedMap = listToMap. map ((k, v) => MapEntry (v, k));

listValue. addAll ([ 4 , 1 ]);
// => invertedMap.value == {'4': 8, '1': 2}