reactive_state

Reactive_state

Flutter를위한 반응성 상태 관리 솔루션을 이해하기 쉽습니다.

원리

관찰 가능한 상태

상태는 ValueNotifier 구현하는 하나 또는 여러 개의 Value 또는 유사한 클래스로 보유됩니다. TextEditingController , Animation 등에서 모두가 알고있는 표준 플러터 인터페이스입니다.

또한 ListValue 및 MapValue 사용하여 관찰 가능한 List 및 Map 값을 생성하여 전체 값 변경 대신 세분화 된 변경 이벤트에 대해 알려줄 수 있습니다.

반응성 위젯

ValueNotifier (또는 Listenable )가 알림을 트리거 할 때 AutoBuild 자동으로 위젯을 재구성합니다. Flutter의 ValueListenableBuilder 와 유사하지만 여러 종속성을 추적 할 수 있으며 Listenable 과도 작동 할 수 있습니다.

addListener / removeListener 에 전화 할 필요가 없습니다. AutoBuild 의존성 추적을 처리하는 동안 get() 십시오.

InheritedWidget 및 Provider 와 달리 재건 된 내용을 세밀하게 통제 할 수 있습니다.

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 의 대안으로 더 복잡한 객체를 수정하기위한 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 변경되지 않은 경우에도 한 번만 알림을 트리거합니다 (복잡한 개체에 대한 비교 연산자를 구현할 필요가 없습니다).

파생 된 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}