8
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ref.の後に手が止まる、、、そんなあなたと私へ送る記事

Last updated at Posted at 2024-10-11

はじめに

私は、状態管理のコードを初めてみた時、何かの暗号ではないかと思うくらい複雑に感じました。
ですが本当によく出てくるものなので、覚えたもん勝ちだと思います!
私自身まだまだあやふやな部分があるので、復習がてら記事を書いてみようと思います。
今回は、私が特によく見てよく迷う ref.read / ref.watchref.when / ref.maybeWhen というメソッドについて説明します。

Riverpodの基本概念

Riverpod
は、アプリでデータ(状態)を管理するためのものです。アプリ内のデータを扱いやすくしてくれます。アプリ内で必要な情報を一元管理して、どこからでもアクセスできるようにします。

Provider
アプリのデータ(状態)を管理し、他のウィジェットで使えるようにするものです。

ref
プロバイダーのデータを取得・監視・操作するための「鍵」のようなものです。

ref.read と ref.watch の違い

ref.read()

ref.read()は、「読むだけ」→ 一度だけデータを取ってきます。
プロバイダーから1回だけデータを取得するメソッドです。ウィジェットの再ビルドは行われません。
ボタンを押したときなど、特定のタイミングでデータを取得したいときに使います。

ref.watch()

ref.watch()は、「見張ってる(つまりwatching)」→ データが変わったら教えてくれます。
プロバイダーのデータを監視します。データが変わるたびにウィジェットが再ビルドされるため、リアルタイムに画面を更新したい場合に便利です。
カウンターのように、データが変わったら画面を自動的に更新したいときに使います。

ref.when と ref.maybeWhen の違い

非同期データ(APIのレスポンスなど)を扱う際に使われます。

※非同期データとは、処理が完了するまでに時間がかかるデータのことです。
例えば、Web APIからデータを取得する場合、ネットワークの状況やサーバーの応答時間によって、データが返ってくるまで時間がかかることがあります。このような場合、処理がすぐに終わらず、待たなければならないデータを「非同期データ」と言います。

非同期データは、loading(読み込み中)、data(データ取得成功)、error(エラー)の主に3つの状態を持ちます。

ref.when()

ref.when()は、すべての状態(loading、data、error)に対して処理を定義するメソッドです。
データ取得中にローディングの表示、成功時にデータの表示、エラー時にエラーメッセージの表示したいときに使います。

ref.maybeWhen()

ref.maybeWhen()は、
特定の状態だけに処理を定義し、その他の状態にはorElseで一括処理を適用するメソッドです。
データ取得成功時のみ特別な処理をしたいが、他の状態には共通の処理をしたいときに使います。

まとめ

簡単にまとめると、
ref.read / ref.watch は、プロバイダーのデータを取得・監視するメソッドです。
readは1回だけデータを取得し、watchはデータが変わるたびに再ビルドします。
ref.when / ref.maybeWhen は、非同期データの状態(loading、data、error)に応じて処理を行うメソッドです。
whenはすべての状態に対して処理を定義し、maybeWhenは特定の状態だけ処理を行います。

いかがでしたでしょうか。
ref. まで書いて「あれ、どっちだっけ?」と手が止まった時には、ぜひこの記事を見に来てください!
ここまで読んでいただきありがとうございました!

8
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?