reactive_state

Reactive_State

من السهل فهم حل إدارة الدولة للرفاه.

مبادئ

دولة يمكن ملاحظتها

يتم الاحتفاظ بالدولة في مثيلات واحدة أو متعددة من Value أو فئات مماثلة تنفذ ValueNotifier . هذه واجهات الرفرفة القياسية التي يعرفها الجميع من TextEditingController ، Animation ، إلخ.

بالإضافة إلى ذلك ، يمكنك استخدام ListValue و MapValue لإنشاء قيم List Map يمكن ملاحظتها التي يمكن أن تخطارك عن أحداث التغيير الدقيقة (بدلاً من تغيير القيمة الكاملة).

عناصر واجهة المستخدم التفاعلية

يقوم AutoBuild تلقائيًا بإعادة بناء عناصر واجهة المستخدم الخاصة بك عندما يؤدي ValueNotifier (أو أي Listenable ) إلى إشعار. إنه مشابه لـ Flutter's ValueListenableBuilder ، ولكنه يمكن أن يتتبع تبعيات متعددة ويعمل أيضًا مع Listenable .

لا حاجة لاتصال addListener / removeListener . ما عليك سوى get() القيمة مباشرةً بينما تهتم AutoBuild بتتبع تبعياتك.

على عكس 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 يمكنك أيضًا استخدام فئة Value reactive_state التي توفر طريقة update() لتعديل كائنات أكثر تعقيدًا:

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

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

هذا يشبه استدعاء setState() مع StatefulWidget . مع 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}