今更Riverpod2.0について調べて発表する

今更Riverpod2.0について調べて発表する

1. Riverpod2 系について調べたことを話 す 株式会社Relic Ryo Kuroki
2. About Me Ryo Kuroki 株式会社Relic Flutter 歴 業務では約3 ヶ月 個人開発で約1 年 EXPERIENCE
3. 発表の対象者と目的 目的 Riverpod ver2.x についてこんな感じなんだ〜と知ってもらう 対象者 🙆 Riverpod は聞いたことあるが、まだ使ったことがない方（特にver2.x ） 🙅‍♀️ Riverpod を熟知されている方、ver2.x もすぐに順応できる方
4. なぜプロバイダが必要なのか アプリの様々な場所からステートにアクセス できるようになる シングルトンや依存性注入、 などを分かりやすく代替することができる ステートを別のプロバイダのステートと簡単 に組み合わせる事が可能 複数のオブジェクトを組み合わせて 1 つのステートにまとめなくていい テスト容易性を高める パフォーマンス最適化 同じ型のオブジェクトを公開するプロバイダ を 複数宣言できる final cityProvider = Provider((ref) => 'London'); final countryProvider = Provider((ref) => 'England');
5. v2.0 以降のProvider の種類 Provider 概要 NotifierProvider v2.0から登場。メインの機能 AsyncNotifierProvider v2.0から登場。FutureProviderではできない状態の変更が可能 Provider これまで通り。Repositoryなどの状態を持たないケースで利用 StateProvider NotifierProviderより非常に単純な場合。レガシー？ StateNotifierProvider NotifierProviderを推奨と明記されている FutureProvider AsyncNotifierProviderを使うほどでもない、状態の変更を伴わない単純なユースケース StreamProvider FutureProviderのStream版 ChangeNotifier 元々非推奨。ChangeNotifierProviderからの置き換えの手始めに最も簡単。
6. code generation によってProvider の種類を意識せず最適なものを実装しやすい
7. 初期値の設定を わかりやすく実装しやすい ここで、 ref.watch(otherProvider) などと、 他のprovider を参照できる 状態を変更するメソッドを UI に公開する code generation によって NotifierProvider が生成される watch で監視しておくと便利 part 'main.g.dart'; @riverpod class Todos extends _$Todos { @override List<Todo> build() { return [ Todo(description: 'Learn Flutter', completed: true), Todo(description: 'Learn Riverpod'), ]; } void addTodo(Todo todo) { state = [...state, todo]; } } flutter pub run build_runner watch コード自動生成のための ファイル名とアノテーション
8. class TodoListView extends ConsumerWidget { const TodoListView({super.key}); @override Widget build(BuildContext context, WidgetRef ref) { List<Todo> todos = ref.watch(todosProvider); return ListView( children: [ for (final todo in todos) CheckboxListTile( value: todo.completed, onChanged: (value) => ref.read(todosProvider.notifier).toggle(todo.id), title: Text(todo.description), ), ], ); } } UI 側の利用は特に変更なし UI 側でstate の値をwatch UI 側からstate を変更する
9. // Riverpod 1系 final fetchUserProvider = FutureProvider.autoDispose.family<User, int>((ref, userId) async { final json = await http.get('api/user/$userId'); return User.fromJson(json); }); // Riverpod 2系 @riverpod Future<User> fetchUser(FetchUserRef ref, {required int userId, required int page}) async { final json = await http.get('api/user/$userId/$page'); return User.fromJson(json); } autoDispose がデフォルトでON になった ( 破棄せず保持したい時はkeepAlive:true と明示する) 引数を1 個しか設定できなかったのが、任意で追加できるようになった