[개발일지] Flutter Bloc 상태관리 #4 Bloc vs Cubit

Flutter Bloc 상태관리 #4 Bloc vs Cubit

<인프런 개발하는 남자 온라인강의 수강일지>

---

Bloc 공식문서

확신이 안 서는 경우, Cubit으로 시작하여, 필요에 따라 Bloc으로 리팩터링 하거나 확장 가능.

Bloc에만 있는 기능

유지보수 측면에서 유리

1. 상태변화 모니터링을 이벤트로 확인 가능

• onChange(): 상태가 어떤 데이터로 바뀌었는지 확인 (Cubit & Bloc)
• onTransition(): 어떤 event를 통해 어떻게 상태 변경 되었는지 확인 가능 (Bloc에만 존재)

// onChange 함수: Cubit, Bloc
@override
void onChange(Change<int> change) {
	super.onChange(change);
	print(change);
}

// onTransition 함수: Bloc only
@override
void onTransition(Transition<CountEvent, int> transition) {
	super.onTransition(transition);
	print(transition);
}

2. 고급 이벤트 변환

on<Event> → transformer 옵션

ex) debounceTime(): 일정 시간 이후 함수 실행

class MovieBloc extends Bloc<SearchMovieEvent, List<String>> {
	// Movie Repository 선언
  final MovieRepository _movieRepository;
	// super()에 초기 상태값 지정
  MovieBloc(this._movieRepository) : super([]) {
    on<SearchMovieEvent>(
      (event, emit) async {
	// event.key를 통해 event에서 받은 Key를 사용
        var result = await _movieRepository.search(event.key);
        emit(result);
      },
	// transformer 옵션 + debounceTime 함수를 통해
	// 검색어를 모두 입력한 후 한 번만 검색할 수 있도록 가능
      transformer: (events, mapper) => events
          .debounceTime(const Duration(milliseconds: 500))
          .flatMap(mapper),
    );
  }
}

class SearchMovieEvent extends Equatable {
  final String key;
  const SearchMovieEvent(this.key);

  @override
  List<Object?> get props => [];
}

*Repository

class MovieRepository {
  List<String> searchPreview = const [...(리스트 들)];

  Future<List<String>> search(String key) async {
    debugPrint('Search to Server: $key');
    await Future.delayed(const Duration(milliseconds: 1000));
		
	// 검색어로 필터링된 리스트를 반환
    return searchPreview.where((movie) => movie.contains(key)).toList();
  }
}

*Cubit

import 'package:bloc/bloc.dart';
import 'package:movie_search_sample2/src/repository/movie_repository.dart';

class MovieCubit extends Cubit<List<String>> {
  final MovieRepository _movieRepository;
  MovieCubit(this._movieRepository) : super([]);

  void search(String key) async {
	// search 함수 실행 시 repository 함수 실행
    var result = await _movieRepository.search(key);
	// 결과값 리스트를 Cubit의 State로 emit
    emit(result);
  }
}