reactive_state

reactive_state

โซลูชันการจัดการสถานะปฏิกิริยาที่เข้าใจง่ายสำหรับการกระพือ

หลักการ

สถานะที่สังเกตได้

สถานะจะจัดขึ้นในหนึ่งหรือหลายกรณีของ Value หรือคลาสที่คล้ายกันที่ใช้ ValueNotifier นี่คืออินเทอร์เฟซ Flutter มาตรฐานที่ทุกคนรู้จาก TextEditingController , Animation ฯลฯ

นอกจากนี้คุณสามารถใช้ ListValue และ MapValue สำหรับการสร้าง List ที่สังเกตได้และค่า Map ที่สามารถแจ้งให้คุณทราบเกี่ยวกับเหตุการณ์การเปลี่ยนแปลงที่ละเอียด (แทนที่จะเปลี่ยนค่าทั้งหมด)

วิดเจ็ตปฏิกิริยา

AutoBuild จะสร้างวิดเจ็ตของคุณใหม่โดยอัตโนมัติเมื่อ ValueNotifier (หรือ Listenable ใด ๆ ) กระตุ้นการแจ้งเตือน มันคล้ายกับ ValueListenableBuilder ของ Flutter แต่มันสามารถติดตามการพึ่งพาหลายครั้งและยังใช้งานได้กับ Listenable

ไม่จำเป็นต้องโทรหา addListener / removeListener เพียงแค่ get() ค่าโดยตรงในขณะที่ AutoBuild ดูแลการติดตามการพึ่งพาของคุณ

ซึ่งแตกต่างจาก InheritedWidget และ Provider คุณจะได้รับการควบคุมอย่างละเอียดเกี่ยวกับสิ่งที่ได้รับการสร้างใหม่

คลาส Flutter มาตรฐานเช่น TextEditingController และ Animation ชั่นใช้งาน ValueListenable และทำงานได้ดีกับ AutoBuild

สถานะที่ได้รับ/คำนวณ

DerivedValue เป็นค่าที่สังเกตได้ซึ่งคำนวณได้ (ได้รับ) จากค่าที่สังเกตได้อื่น ๆ

นอกจากนี้ ListValue และ MapValue ยังให้ .map() และการดำเนินการอื่น ๆ สำหรับการสร้างคอนเทนเนอร์ที่ได้รับซึ่งทำให้ตัวเองอัปเดตบนพื้นฐานต่อองค์ประกอบ

แผ่นฝุ่นและทางอ้อมน้อยลง

รหัสผลลัพธ์นั้นง่ายกว่าโซลูชันเดียวกันใน Bloc หรือ 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' ),
          ),
        ],
      ),
    );
  }
}

โปรดทราบว่าในแอปพลิเคชันในโลกแห่งความเป็นจริงคุณไม่ควรกลายพันธุ์สถานะโดยตรง แต่แทนที่จะใส่ลงในวิธีการแยกต่างหากเช่นบนวัตถุที่สามารถเข้าถึงได้ผ่านแพ็คเกจผู้ให้บริการ

นอกจากนี้ลองดูตัวอย่างใน repo

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 เป็น 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}