👶
【Riverpod学習】ref.listenについて
ref.listenについての学習の備忘録です。
ref.listenの基本的な役割
ref.listenは、プロバイダの状態の変化を監視し、その変化に基づいて処理を実行するために使用します。ref.listenを使うと、あるプロバイダの状態が変わった際に、それに応じた処理をUIの更新とは別に実行できます。
ref.listenの特徴
- 状態変化の検知: プロバイダの状態が変化するたびに呼び出されます（例：非同期処理の結果が変わったとき）。
- UI外の処理: 画面の再描画以外に、エラーメッセージの表示やナビゲーションの処理などを行いたいときに便利です。
- リアクティブな対応: 状態が「エラー」や「成功」などに変わった際に、即座に対応する処理を実行できます。
ref.listenの使い方
ref.listen(authNotifierProvider, (previous, next) {
next.maybeWhen(
error: (error, stackTrace) {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: const Text('エラーが発生しました'),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('OK'),
),
],
),
);
},
orElse: () => null,
);
});
1. 引数:
- authNotifierProvider: 監視したいプロバイダ。
- previous: 前の状態。
- next: 次の状態（プロバイダの状態が変わった後の新しい状態）。
2. maybeWhen:
maybeWhenはAsyncValueの状態に基づいて特定の処理を行います。ここでは、errorの状態でダイアログを表示しています。
orElseで、他の状態（成功やローディングなど）には何も処理を行わないようにしています。
ref.listenの用途
ref.listenを使うケースは主に以下のような場合です：
- 非同期処理の監視: データの取得やログイン処理などの非同期処理が成功・失敗した場合に、ユーザーにフィードバックを与える（例：エラーダイアログを表示する）。
- UI外の処理: 状態変化に応じてUI以外のアクション（例：ログの記録、APIリクエスト）を行う。
- 状態の変化をトリガーにした動作: 状態が「ログイン成功」に変わったら、次の画面に遷移するなど。
ref.listenのメリット
UIロジックと非同期処理を分離: 直接UIに依存せずに、非同期処理の状態に対する処理を実行できるため、コードの見通しがよくなります。
特定の状態に反応: 状態が「成功」「失敗」などに変わったときにだけ、特定の処理を実行できるので、効率的です。
まとめ
ref.listenは、プロバイダの状態変化を監視し、それに応じてリアクティブに処理を実行するための強力なツールです。特に非同期処理の結果に基づいてダイアログの表示や画面遷移などを行う場合に非常に便利です。
Discussion