[Flutter] Bloc ④ - context.read, context.watch, context.select

Bloc ① - 소개  https://dalgoodori.tistory.com/28

Bloc ② - Cubit 과 Bloc https://dalgoodori.tistory.com/29

Bloc ③ - Bloc Widgets https://dalgoodori.tistory.com/30

Bloc ④ - context.read, context.watch, context.select

Bloc ⑤ - Bloc Test https://dalgoodori.tistory.com/32

 

1. context.read<T>

• context.read<T>()는 T 유형의 가장 가까운 조상 인스턴스를 찾습니다.
• 기능적으로 BlocProvider.of<T>(context)와 동일합니다. 
• context.read는 onPressed 콜백 내에 이벤트를 추가하기 위해 블록 인스턴스를 검색하는 데 가장 일반적으로 사용됩니다.

onPressed() {
  context.read<CounterBloc>().add(CounterIncrementPressed()),
}

 

• 사용시 주의할 점은 빌드 메소드 내에서 상태를 검색하기 위해 context.read를 사용하면 안됩니다.  
• 블록의 상태가 변경되면 위젯이 다시 빌드되지 않기 때문에 오류가 발생할 수 있습니다.

@override
Widget build(BuildContext context) {
  final state = context.read<MyBloc>().state;
  return Text('$state');
}

 

2. context.watch<T>

• context.watch<T>()는 T 유형의 가장 가까운 조상 인스턴스를 제공하지만 인스턴스의 변경 사항도 수신합니다. 
• 기능적으로 BlocProvider.of<T>(context, listen: true)와 동일합니다.
• 제공된 T 유형의 개체가 변경되면 context.watch가 다시 빌드를 트리거합니다.
• context.watch는 StatelessWidget 또는 State 클래스의 빌드 메서드 내에서만 액세스할 수 있습니다.
• Builder 위젯을 통해 BlocBuilder 대신 사용해도 됩니다.
• Builder 위젯을 통해 MultiBlocBuilder 도 구현 가능합니다.

// BlocBuilder

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: BlocBuilder<MyBloc, MyState>(
        builder: (context, state) {
          // Whenever the state changes, only the Text is rebuilt.
          return Text(state.value);
        },
      ),
    ),
  );
}


// BlocBuilder 대신 Builder 로 구현

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: Builder(
        builder: (context) {
          // Whenever the state changes, only the Text is rebuilt.
          final state = context.watch<MyBloc>().state;
          return Text(state.value);
        },
      ),
    ),
  );
}


// Builder 를 통해 구현한 MultiBlocBuilder

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: Builder(
        builder: (context) {
          final stateA = context.watch<BlocA>().state;
          final stateB = context.watch<BlocB>().state;
          final stateC = context.watch<BlocC>().state;

          // return a Widget which depends on the state of BlocA, BlocB, and BlocC
          }
      ),
    ),
  );
}

 

• 사용 시 주의할 점은 빌드 메소드의 상위 위젯이 상태에 의존하지 않을 때 context.watch를 사용하면 안됩니다.
• build 메소드의 루트에서 context.watch를 사용하면 블록 상태가 변경될 때 전체 위젯이 다시 빌드되기 때문입니다.

@override
Widget build(BuildContext context) {
  // Whenever the state changes, the MaterialApp is rebuilt
  // even though it is only used in the Text widget.
  
  final state = context.watch<MyBloc>().state;
  return MaterialApp(
    home: Scaffold(
      body: Text(state.value),
    ),
  );
}

 

3. context.select<T, R>

• context.select<T, R>(R function(T value))는 T 유형의 가장 가까운 조상 인스턴스를 제공하고 T의 변경 사항을 수신합니다.
• context.watch와 달리 context.select 상태의 더 작은 부분에서 변경 사항을 수신할 수 있습니다.  

Widget build(BuildContext context) {
  
  // ProfileBloc 상태의 속성 이름이 변경될 때만 위젯을 다시 빌드합니다.
  final name = context.select((ProfileBloc bloc) => bloc.state.name);
  return Text(name);
}

 

• Builder 위젯을 통해 BlocSelector 대신 사용해도 됩니다.

// BlocSelector

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: BlocSelector<ProfileBloc, ProfileState, String>(
        selector: (state) => state.name,
        builder: (context, name) {
          // Whenever the state.name changes, only the Text is rebuilt.
          return Text(name);
        },
      ),
    ),
  );
}


// BlocSelector 대신 Builder 로 구현

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: Builder(
        builder: (context) {
          // Whenever state.name changes, only the Text is rebuilt.
          final name = context.select((ProfileBloc bloc) => bloc.state.name);
          return Text(name);
        },
      ),
    ),
  );
}

 

• 사용 시 주의할 점은 context.watch 와 동일합니다.

@override
Widget build(BuildContext context) {
	
  // 빌드 메소드의 루트에서 사용하면 블록이 변경될 때 전체 위젯이 다시 빌드됩니다.  
  final name = context.select((ProfileBloc bloc) => bloc.state.name);
  return MaterialApp(
    home: Scaffold(
      body: Text(name),
    ),
  );
}