Flutter Bloc 패턴

기존에 프로바이더를 사용했던 플러터 구조에서 조금 더 AAC (안드로이드 아키텍처 컴포넌트 ) 와 비슷한 bloc 패턴으로 리펙토링을 하기로 결심하고 기존 프로젝트를 수정하게 되었다.

Bloc 패턴 알아보기

우선 블록이라 함은 Business Logic of Components 의 줄임말으로

여러가지 상태관리 중

• setState
• redux
• Provider
• Bloc
• InheritedWidget

하나로 개발자들간에 자주 쓰이는 패턴이다.

그전에 상태관리에 대해 상태가 무엇인지 왜 상태관리를 해야하는지 설명하도록 하겠습니다.

상태 (State)

쉽게 해석하자면 앱 내부의 데이터 라고 보면 될거같다. 유저가 어떤 행동을 취했을 때 내부에서 변하는 데이터가 상태(state)라고 합니다.

상태관리 (state management)

왜 상태관리가 필요할까 ?

간단한 카운터 앱 이거나 todo 면 미들웨어가 필요 없을테지만 조금만 앱의 덩치가 커지면 setState 만으로는 상태 관리하는데 어려움이 있을것입니다.
이 때문에 따로 상태를 관리할 수 있는 미들웨어 (여기선 Bloc) 이 필요합니다.

Bloc 패턴

블록패턴에서 있어야할 두 가지는 State ( 현재 상태 ) 와 Event ( 특정 이벤트 ) 입니다.

각 이벤트 별로 분기 처리를 해주어 이벤트가 발생 할 때 마다 mapEventToState 가 호출이 됩니다.

@override
Stream<CourseState> mapEventToState(BaseEvent event) async* {
    if (event is AEvent) {
      yield* mapLoadEventToState(event);
    } else if (event is BEvent) {
      yield* mapRefreshEventToState(event);
    }
}

State

객체 비교를 용이하게 해주는 Equatable 을 상속한 BaseState 를 하나 만들고 분기처리하기 위한 State 만드는 방식으로 제작합니다.

ex)

class UpdatingState extends BaseState {}

class InitialState extends BaseState {}

class LoadingState extends BaseState {}

Event

State 와 마찬가지로 유저가 어떤 행위를 했을 때 어떤 이벤트를 발생시킬것인지 각 분기별로 제작합니다.

class LoadEvent extends BaseEvent {}

class RefreshEvent extends BaseEvent {}

Bloc

위에서 만들어 준 State 와 Event 를 사용하는 블록 Bloc<BaseEvent, BaseState> 을 상속받아 비즈니스 로직을 state와 event 로 분기처리를 여기서 구현합니다.

ex)

@override
Stream<CourseState> mapLoadEventToState(CourseEvent event) async* {
    try {
      final freeState = state;
      if (freeState is FreeInitialState) {
        yield FreeLoadingState();
        final response = await freeRepository.fetchFreeCourses(10);
        yield FreeLoadedState(courses: response);
      } else if (freeState is FreeLoadedState) {
        yield FreeUpdatingState();
        final response = await freeRepository.fetchFreeCourses(10,
            offset: freeState.courses.length);

        final updateList = freeState.courses..addAll(response);

        yield FreeLoadedState(courses: updateList);
      }
    } on Exception {}
}

참고

https://github.com/felangel/bloc