[GetX 기능 정리] 3. 반응형 상태 관리

3882 단어 fluttergetxflutter

인스턴스 선언

@override
Widget build(BuildContext context){
	Get.put(CountReactiveGetx());
    return Scaffold(
      body: Column(
        children:[
        	//첫번째 방법
        	Getx(builder:(_){
            	return Text("%{Get.find<CountReactiveGetx>().count.value}")
            }),
            
            //두번째 방법 => 둘 중 하나 사용하기
        	Obx(() => Text(
        		"%{Get.find<CountReactiveGetx>().count.value}")),
                
          	RaisedButton(
          		child:Text("+"),
          		onPressed:(){
          			Get.find<CountReactvieGetx>().increase();
          		}
          	),
            
           RaisedButton(
          		child:Text("5로 변경하기"),
          		onPressed:(){
          			Get.find<CountReactvieGetx>().putNumber(5);
          		}
          	),
        ]
      )
    )
}

Reactive Getx Controller

class CountReactiveGetx{
  RxInt count = 0.obs; //반응형 관리
  void increase(){
    count++;
  }
  void putNumber(int value){
  	count(value);
  }
}
  • GetX는 값이 변경 될 때만 상태를 업데이트 함

이벤트 넣기

class CountReactiveGetx extends GetxController{
  RxInt count = 0.obs; //이러한 반응형 상태일때만 가능!!
  void increase(){
    count++;
  }
  void putNumber(int value){
  	count(value);
  }
  
  	@override
    void oninit(){
      ever(count, (_) => print("매번 호출));
      once(count, (_) => print("한번만 호출));
      debounce(count,(_) => print("마지막 변경에 한번만 호출"),time:Duration(seconds:1))
      interval(count,(_) => print("변경되고 있는 동안 1초마다 호출"))
      
      // ==> count값이 변화하면 ever, once가 호출된다.
      // debounce는 검색 기능에서 유용하게 사용됨.
      super.onInit();
    }
    
    @override
    void onCLose(){
      super.onClose();
    }
    
    @override
    	get onDelete => super.onDelete;
  
  
}

Rx타입 자료형

enum NUM {FIRST,SECOND}

class User{
  String name;
  int age;
  User({this.name, this.age})
}

class CountReactiveGetx extends GetxController{
  RxInt count = 0.obs;
  RxDouble _double = 0.0.obs;
  RxString value = "".obs;
  Rx<NUM> nums = NUM.FIRST.obs;
  Rx<User> user = User(name:'Mia',age:10).obs;
  RxList<String> list=[].obs;
  
  void increase(){
    count++;
    _double++;
    _double(424);
    
    nums(NUM.SECOND);
    user(User());
    user.update((_user){ _user.name='James'});
    
    //list.addAll();
    //list.add();
    //list.addIf(user.value.name == 'Mia','OKAY') //(조건,추가할요소)
  } 
  
}

정리

단순 상태관리는 설정 값에 변화 없이 무조건 호출, 반응형 상태관리는 값에 변화가 없으면 호출이 일어나지 않으므로 리소스 절약이 가능하다.
반응형 상태관리를 사용할 지, 단순 상태관리를 사용할 지 아니면 둘 다 사용할지는 상황에 따라 결정하기,,,

출처 https://www.youtube.com/watch?v=TjC1ka8fZJw

좋은 웹페이지 즐겨찾기