Bloc Pattern

Bloc Pattern
Bussiness Logic Component
https://medium.com/@pks2974/bloc-%EC%9D%B4%ED%95%B4-%ED%95%98%EA%B8%B0-%EB%B0%8F-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC-%ED%95%98%EA%B8%B0-7dc705e4c640

Bloc 패턴은 Flutter의 상태 관리를 제어하기 위해서 Google개발자에 의해서 디자인 되었다.

Flutter에서는 상태에 따라서 렌더링이 일어나기 때문에, 상태 관리가 매우 중요하다.
BLOC은 UI와 Bussiness Logic을 분리하여, 각각 코드의 의존성을 낮추게한다.


Bloc의 형태
bloc에서 각 UI객체들은 bloc객체를 구독하고 있다.

bloc객체의 상태가 변경되면, bloc의 상태를 구독중인 UI객체 들은 그 즉시 해당 상태로 UI를 변경한다.
bloc객체는 UI객체로 부터 이벤트를 전달받으면, bloc객체는 필요한 provider나 repository로 부터 데이터를 전달받아,
Bussiness Logic을 처리 한다.
처리 후 Bloc객체를 구독중인 UI객체들에게 상태를 전달한다.

class BLoC{
  provider: Provider = new Provider();
  stream: Subject = new Subject();
  async sink(){
    const data = await Provider.getCounterModel();
    const result = await this.BussinessLogic(data);
    this.stream.next(result);
  }

  private async BussinessLogic(){
    //...
  }
}

UI객체는 구독중이던 BLoC객체의 상태가 변경되면 상태를 전달받는데,
이때 얻은 상태를 이용하여 화면을 재구성 한다.

class UI{
  bloc = new BLoC();
  constructor(){
    this.bloc.stream.subscribe((data) =>{
      this.render(data);
    });
  }

  render(data){
    return (
      <div onClick={this.bloc.sink}>
        {data}
      </div>
    )
  }
}