<aside> 💡 BLoC 페이지를 기본적으로 익힌 상태를 가정하고 간단한 문법한 소개하는 페이지입니다. Cubit은 BLoC의 간소화 버전이니 대부분의 Cubit에 대한 내용은 BLoC 페이지에서 읽을 수 있습니다.

</aside>

큐빗이란?

큐빗은 BlocBase 를 상속한 하나의 클래스이며 어떤 타입의 상태든 관리하기 위해 확장될 수 있다.

큐빗은 상태를 변경시키는 기능의 함수를 내보내는 방식으로 상태를 관리한다.

즉, 상태란 큐빗의 산출물이며 앱의 상태를 대표하는 하나의 부분이다. UI 컴퍼넌트는 앱의 상태를 알림받고 현재 상태를 기반으로 스스로를 재배치 할 수 있다.

큐빗 튜토리얼

큐빗은 다음과 같이 선언할 수 있다.

• emit() 이라는 함수를 통해 새로운 상태를 출력할 수 있다.
  • emit은 오직 Cubit 안에서만 사용되어야 한다.
• 큐빗은 별다른 정의 없이 Stream 객체를 이용할 수 있다.
  • listen을 통한 상태 수신 시 기존 상태는 받을 수 없고 후속 변경 상태값만 받을 수 있다는 점을 주의해야 한다.

class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);
}

//또는
class CounterCubit extends Cubit<int> {
  CounterCubit(int initialState) : super(initialState);

	void increment() => emit(state + 1);
}

void main() {
	final cubitA = CounterCubit(0); // state starts at 0
	final cubitB = CounterCubit(10); // state starts at 10

	final cubit = CounterCubit(0);
  print(cubit.state); // 0
  cubit.increment();
  print(cubit.state); // 1
  cubit.close();
}

Future<void> main() async {
  final cubit = CounterCubit();
  final subscription = cubit.stream.listen(print); // increment함수 실행 시 1 수신, 기존값인 0은 받지 못함
  cubit.increment();
  await Future.delayed(Duration.zero); // 필요한 코드는 아니며 구독이 즉시 취소되는 현상을 막기 위한 테스트용 코드
  await subscription.cancel();
  await cubit.close();
}

큐빗은 onChange 함수 오버라이딩을 통해 한 큐빗에서 일어나는 모든 상태 변경을 관찰할 수 있다.

class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);

  void increment() => emit(state + 1);

  @override
  void onChange(Change<int> change) {
    super.onChange(change);
    print(change);
  }
}

void main() {
  CounterCubit()
    ..increment()
    ..close();
}
//결과 Change { currentState: 0, nextState: 1 }

모든 큐빗에 대한 변화를 관찰하고자 할 때는 간단히 BlocObserver 를 상속하여 onChange 함수를 오버라이딩 해주기만 하면 된다.

class SimpleBlocObserver extends BlocObserver {
  @override
  void onChange(BlocBase bloc, Change change) {
    super.onChange(bloc, change);
    print('${bloc.runtimeType} $change');
  }
}

void main() {
  Bloc.observer = SimpleBlocObserver();
  CounterCubit()
    ..increment()
    ..close();  
}
//큐빗 내부의 onChange 함수가 먼저 실행되고 그 후 실행된다.
//Change { currentState: 0, nextState: 1 }
//CounterCubit Change { currentState: 0, nextState: 1 }

BlocObserver는 Change 외에도 큐빗의 인스턴스에 접근할 수 있다.