Riverpodのデータキャッシュとプロバイダライフサイクルのクイックガイド

Riverpodはリアクティブキャッシュとデータバインディングフレームワークを取り入れています。これらは、プロバイダパッケージから大きく進化しました。通常、RiverpodはProviderパッケージの再設計です。これらはアクセス不可能だった向上点を実現するための適切なオプションです。

ほとんどの人は、広範囲のリアクティブキャッシングとデータバインディングフレームワークを含むステート管理フレームワークを見たがっています。Riverpod 2.0はReact Queryの貴重な概念から有効化されたものです。これらはFlutterの世界から高い卓越性へ容易にアクセスするために提供されます。

Flutter Riverpod 2.0

通常、Providerパッケージは、InheritedWidgetの向上に関連しており、完全なウィジェットツリーに依存しており、簡単に有効にすることができます。Riverpodもまた、ほとんどのプロバイダが世界中で使用されているため、100%コンパイルセーフなオプションです。

Riverpodは、面倒なくどこからでも簡単にアクセスすることができます。Providerパッケージには、InheritedWidgetsを包む使いやすいパッケージが含まれます。これにより、適切に使用して管理するための便利なオプションとしています。

• 多用途であり、ほとんどの機能に使用される
• プロバイダを作成し組み合わせるのに役立つ
• リアクティブキャッシングを行う
• 簡単にフェッチする
• コンパイル時にプログラミングエラーをキャッチする
• プロバイダの状態を廃棄する
• 非同期に依存する
• リモートソースからデータを更新する
• テスト可能なコードを書く
• ロジックをウィジェットツリーの外に保つ

この方法は、Flutterアプリのステート管理技術に適しており、データ管理に適しています。Riverpodデータキャッシュは、プロバイダパッケージからの高度な技術であり、面倒なくより良い安定性を提供することが保証されています。

以下は、アクセス可能性を完全に提供するステップです：

final counterProvider = StateNotifierProvider<counter, int="">((ref) {
  return Counter();
});
Class Counter extends StateNotifier<int> {
Counter() : super(0);
  void increment() => state++;
}

プロバイダを消費するためには、以下のステップに従うことができます：

class Home extends ConsumerWidget { 
@override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);
    return Text('$count');
  }
}

Riverpodは、データを取得し、キャッシュするための完全な範囲のパターンを実装しています。これらをアクセシビリティ機能に対して再実装する必要はありません。これらは素晴らしいアプリアーキテクチャを確立するための非常に効率的なオプションです。これらはまた、最小限の摩擦で機能を構築することに焦点を当てるのに適しています。

主要なRiverpod APIを探る

近年、新しいriverpod_generatorパッケージがRiverpod 2.0の最大の部分として公開されました。これらに加えて、新しい@riverpodアノテーションAPIも導入されました。コード内のメソッドやクラスに対してプロバイダを自動生成するために簡単にそれらを使うことができます。

コンパイルセーフ機能もプロセスに追加されています。ですので、ProviderNotFoundExceptionが必要ないか、ローディング状態の処理を忘れることはありません。いつでもどこでも面倒なくプロバイダを追加することができます。

この方法は、どこからでも共有状態を宣言するための完璧なオプションです。もうmain.dartやUIファイルからジャンプする必要はありません。共有状態のコードを適切な場所に配置することができます。これらは別々のパッケージで有効にすることもできますし、Flutterウィジェットの隣に追加することもできます。

final countProvider = StateProvider((ref) => 0);
// 共有状態を消費する
class Title extends ConsumerWidget {
 @override
Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(countProvider);
    return Text('$count');
  }
}

この方法には、完全なriverpodを含むstale-while-revalidateパターンが含まれています。また、query_providerパッケージを見ることもできます。バックエンドクラスはghibli-apiを使って簡単に作成することができます。検証済みのProvider.familyは状態がメモリ内に維持されるかどうかを簡単にチェックするための重要なオプションです。

Providerパッケージはどのように始まるのか？

通常、Providerパッケージは2つの可能性のある属性で始まります：

もし私たちがmain内でrunAppを呼び出して、最上位のProviderScopeを獲得した場合

もし私たちがCounterWidgetウィジェットをマウントして、buildメソッドでref.watchを呼び出した場合

異なる基準に基づいて、コード上のprintステートメントを変更することは効果的です。

void main() { 
print('Inside main'); 
runApp(ProviderScope(
    child: MaterialApp(     
home: CounterWidget(),
    ),
  ));
}
final counterStateProvider = StateProvider<int>((ref) { 
print('counterStateProvider initialized');
  return 0;
});

counterStateProviderは、ref.watch(counterStateProvider)として呼び出されたときに完全に初期化されます。主な理由は、Riverpodプロバイダはアプリ開発プロセスにより多くの時間を節約できるからです。

printステートメントやデバッグブレークポイントは、アプリのランタイム挙動を探究し、無数のバグを効率よく診断し修正する素晴らしい方法です。この方法は、これらのツールを使用してFlutterをスムーズに実行するための適切なオプションです。

Riverpodのデータキャッシングでリスナーを登録する方法は？

Riverpodのデータキャッシングおよびプロバイダーライフサイクルでリスナーを登録するためには、以下のステップに従ってください：

class CounterWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // 1. プロバイダを監視する
    final counter = ref.watch(counterStateProvider);
    return ElevatedButton(
      // 2. 値を使用する   
child: Text('Value: $counter'),
      // 3. ボタンが押されたときにカウンターを増やす   
onPressed: () => ref.read(counterStateProvider.notifier).state++,
    );
  }
}
buildメソッド内でref.watch(counterStateProvider)を呼び出す

これらには、問題なく最終結果への2つのプロセスが含まれています。プロバイダの状態またはカウンター値を取得することができるので、それに応じてUIを表示します。CounterWidgetはcounterStateProviderに素晴らしいリスナーです。これらはプロバイダの状態が変更されると構築されます。

*これらの方法も、プロバイダーの結果に影響を与えます：*

• 最初のリスナーがいるとプロバイダの状態が簡単に初期化される
• 状態が変わるとリスナーが通知される
• リスナーが更新・再構築する
• プロバイダーは1つ以上のリスナーを持っている可能性がある
• カウンターアプリには1つのプロバイダとリスナーウィジェットがあった
• Observableパターン
  • プロバイダーも他のプロバイダーをリスンする
  • Riverpodはobservableパターンを基にしている

ref.watch()もref.listen()も、プロバイダーにリスナーを登録するために使用されます

• ワンタイムリード機能
• リスナーは登録されない

プロバイダーは状態を維持し、最上位ProviderScopeが排除されるまでメモリ内に保持されます。これらはユーザーがアプリを殺すために有効化されたProviderScopeレベルにアクセスできます。

結論

Riverpodは、コンパイル属性の完全な側面を有効にすることができます。ProviderパッケージはRiverpodに大きなインスピレーションを与えました。これらは、同じ種類の複数のプロバイダーをサポートするなどの主要な問題を解決するための適切なオプションでもあります。これらは非同期プロバイダーを待つこともできます。もしあなたが中規模から大規模のビジネスアプリケーションを開発することを考えているなら、このRiverpodについての情報は役に立つでしょう。

よくある質問（FAQ）

1. RiverpodはProviderよりも優れていますか？

理解するために、プロバイダーパッケージの主な欠点を見てみましょう。デザインによると、Providerはinherited widgetの改善であり、ウィジェットツリーに依存しています。一方、Riverodは、すべてのプロバイダーがグローバリーに宣言されていて、どこからでもアクセスできるため、コンパイルセーフです。

2. Riverpodでのfuture Providerとは何を意味しますか？

FutureProviderは、JSONファイルを読むことで構築された設定オブジェクトを公開する簡単で便利な方法です。futureが完了すると自動的にUIを再構築します。同時に、さまざまなウィジェットが設定を求める場合、アセットは1度だけデコードされます。

3. Riverpodの一時的な状態とは何ですか？

ウィジェットにローカルな状態を一時的な状態と呼びます。状態は単独のウィジェット内に含まれており、単にStatefulウィジェットを使用してUIを再構築するための複雑な状態管理技術は必要ありません。

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/kuldeeptarapara/a-quick-guide-to-riverpod-data-caching-and-provider-lifecycles-5enf