reactive_state

reactive_state

Solusi manajemen negara reaktif yang mudah dipahami untuk flutter.

Prinsip

Keadaan yang bisa diamati

Negara dipegang dalam satu atau beberapa contoh Value atau kelas serupa yang menerapkan ValueNotifier . Ini adalah antarmuka flutter standar yang diketahui semua orang dari TextEditingController , Animation , dll.

Selain itu, Anda dapat menggunakan ListValue dan MapValue untuk membuat List yang dapat diamati dan nilai Map yang dapat memberi tahu Anda tentang peristiwa perubahan berbutir halus (bukan perubahan nilai keseluruhan).

Widget reaktif

AutoBuild secara otomatis membangun kembali widget Anda ketika ValueNotifier (atau apa pun Listenable ) memicu pemberitahuan. Ini mirip dengan ValueListenableBuilder dari Flutter, tetapi dapat melacak banyak ketergantungan dan juga bekerja dengan Listenable .

Tidak perlu menelepon addListener / removeListener . get() nilainya secara langsung saat AutoBuild menangani melacak ketergantungan Anda.

Tidak seperti InheritedWidget dan Provider Anda mendapatkan kendali berbutir halus atas apa yang akan dibangun kembali.

Kelas flutter standar seperti TextEditingController dan Animation mengimplementasikan ValueListenable dan dengan demikian bekerja dengan baik dengan AutoBuild .

Keadaan turunan/dihitung

DerivedValue adalah nilai yang dapat diamati yang dihitung (diturunkan) dari nilai -nilai lain yang dapat diamati.

Juga, ListValue dan MapValue menyediakan .map() dan operasi lain untuk membuat wadah turunan yang membuat diri mereka diperbarui berdasarkan per-elemen.

Lebih sedikit boilerplate dan tipuan

Kode yang dihasilkan jauh lebih sederhana daripada solusi yang sama dalam blok atau redux.

• Tidak ada aliran, tidak ada StreamBuilder , tidak ada pemuatan widget yang tidak sinkron (kecuali jika Anda benar -benar membutuhkannya).
• Tidak ada objek acara khusus, tidak ada penangan acara dengan pernyataan panjang switch() .

Penggunaan

Catatan: Juga lihat referensi untuk detailnya.

Contoh AutoBuild Sederhana:

 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' ),
          ),
        ],
      ),
    );
  }
}

Perhatikan bahwa dalam aplikasi dunia nyata Anda tidak boleh secara langsung bermutasi keadaan, tetapi malah masukkan ke dalam metode terpisah misalnya pada objek yang dapat diakses melalui paket penyedia.

Juga, lihat contoh dalam repo.

Autorun dan Autorunner

Di luar widget, Anda mungkin masih ingin bereaksi terhadap perubahan keadaan. Anda dapat melakukannya dengan autoRun() dan AutoRunner (lihat referensi untuk detail).

Nilai vs Valuenotifier

Sebagai alternatif untuk ValueNotifier Anda juga dapat menggunakan kelas Value reactive_state yang menyediakan metode update() untuk memodifikasi objek yang lebih kompleks:

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

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

Ini mirip dengan panggilan setState() dengan StatefulWidget . Dengan update() Anda dapat mengubah beberapa atribut dan Value akan memicu pemberitahuan tunggal setelah selesai - bahkan jika tidak ada yang diubah (jadi Anda tidak perlu mengimplementasikan operator perbandingan untuk objek kompleks).

Nilai turunan

DerivedValue adalah ValueListenable yang dihitung secara dinamis yang dapat memperbarui nilainya setiap kali ketergantungannya berubah:

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

Di sini, emailLink dapat diamati sendiri dan diperbarui setiap kali user dimodifikasi.

ListValue dan MapValue

Contoh sederhana yang menunjukkan beberapa hal yang dapat dilakukan:

 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}