What is Riverpod

Overview

Riverpod은 Provider의 후속작으로 Flutter/Dart를 위한 상태관리 프레임워크이다.

자동으로 fetch(가져오고), cache(캐싱하고), combine(조합하고), 네트워크 요청을 recomputate(재계산하고), 에러를 처리할수 있다.

Features

• Riverpod은 Compile Safe
  : 더이상 ProviderNotFountException과 같은 Error를 받지 않는다.

• Flutter에 의존적이지 않다.
  : 따라서, BuildContext를 사용할 필요가 없다.

• devtool에서 상태를 확인할 수 있다.

Providers

State를 캡슐화 하는 object이다.

Reference Link

• riverpod main page

Usage

Getting Started

(in cmd) Install

$ flutter pub add hooks_riverpod dev:custom_lint dev:riverpod_lint riverpod_annotation dev:build_runner dev:riverpod_generator

analysis_options.yaml

analyzer:
  plugins:
    - custom_lint

import

import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

Create Provider Scope

Widget에서 Provider들을 Read/Listen하기 위해서는 전체 Application을 ProviderScope()로 감싸야한다.

  runApp(
    const ProviderScope(
      child: MyApp(),
    ),
  );

Types

Riverpod 2.0에서 제공하는 Provder들을 알아보자.

Provider

ref.watch를 이용하여 동기화 동작을 제공하는 강력한 도구이다.

StateProvider

StateNotifierProvider

(Async)NotifierProvider

FutureProvider

StreamProvider

ChangeNotifierProvider

Riverpod vs Provider

Provider의 기술적 한계를 극복하고자 Riverpod이 만들어졌다.

Definition

• With Provider
  : Provider들은 Widget이고 Widget tree 안에 위치된다. (전형적으로는 MultiProvider안에..)

class Counter extends ChangeNotifier {
 ...
}

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider<Counter>(create: (context) => Counter()),
      ],
      child: MyApp(),
    )
  );
}

• With Riverpod
  : Provider들이 Widget이 아니고 순수 Dart Object들이다. 따라서 widget tree 밖에서 정의된다.
  전체 Application을 ProviderScope Widget으로 감싸야한다.

// Providers are now top-level variables
final counterProvider = ChangeNotifierProvider<Counter>((ref) => Counter());

void main() {
  runApp(
    // This widget enables Riverpod for the entire project
    ProviderScope(
      child: MyApp(),
    ),
  );
}

[Reading] BuildContext

• With Provider (BuildContxt)
  : Widget의 BuildContext를 이용하여 읽는다.

Provider<Model>(...);

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Model model = context.watch<Model>();

  }
}

• With Riverpod (WidgetRef)
  : CustomWidget을 extends한 class에서 WidgetRef를 build 함수에서 추가 parameter를 하여 사용한다.

final modelProvider = Provider<Model>(...);

class Example extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    Model model = ref.watch(modelProvider);

  }
}

[Reading] Consumer

• With Provider
  : Consumer로 명명된 Widget은 State가 변경될 때, 관련 Widget들이 업데이트 되서 Rebuild 한다.

Provider<Model>(...);

Consumer<Model>(
  builder: (BuildContext context, Model model, Widget? child) {
  }
)

• With Riverpod
  : 같은 목적으로 Consumer로 사용하는데 사용하는데, Model 대신 WidgetRef를 사용한다.

final modelProvider = Provider<Model>(...);

Consumer(
  builder: (BuildContext context, WidgetRef ref, Widget? child) {
    Model model = ref.watch(modelProvider);

  }
)