Zenn
🍎

Riverpodの.autoDisposeでステートを破棄してみた

2022/10/25に公開
Flutter
Dart
Riverpod
tech

概要

初めまして、まさたかです。

個人開発「筆記療法アプリ」では
・状態管理：hooks_riverpod, state_notifier, freezed
・アーキテクチャ：MVVM + Repository
を採用しています。

この中で.autoDisposeが必要になる場面が生じたので、初記事で解説してみようと思いました🙌

.autoDisposeとは？

Riverpod公式の説明によると、「参照されなくなったプロバイダのステート(状態)を破棄する」 時に使う。例えば...

  • Firebase 使用時に、サービスとの接続を切って不必要な負荷を避けるため。
  • ユーザが別の画面に遷移してまた戻って来る際に、ステートをリセットしてデータ取得をやり直すため。

このような場合に.autoDispose 修飾子を使うことで、ステート(状態)を破棄できます。
今回は、後者の理由のため使用しました。

どう使った？(個人開発の紹介)

.autoDisposeを使用したシーンだけ見ても全体像がわからないので、個人開発「筆記療法アプリ」の全体像から紹介します。

このアプリは主に３つの機能から構成されています。

  • ①カレンダー機能：投稿した日記をカレンダーで表示する機能
  • ②日記を投稿する機能：日記を投稿し、データベースに保存する機能
  • ③レベルアップ機能：投稿した日記の字数をカウントし、それに応じてユーザがレベルアップする機能

＊以下の画面は開発中のものです

②日記を投稿する画面

  • 日記を投稿する画面
    • 現在の日付
    • 日記の内容を書くためのTextField
    • ○字!には入力中の字数がカウントされる
    • 日記を投稿するボタン(+カウントされた字数を使ってユーザをレベルアップする)

.autoDisposeの使用例

結果から言うと、このように使用しました。

final addEventPageNotifierProvider =
    StateNotifierProvider.autoDispose<AddEventPageNotifier, AddEventPageState>(
  (ref) => AddEventPageNotifier(
    eventRepository: ref.read(eventRepositoryProvider),
    authRepository: ref.read(authRepositoryProvider),
    userRepository: ref.read(userRepositoryProvider),
  ),
);

解説

何が問題だったのかというと、「②日記を投稿する画面」にて

  • 前の画面に戻る→
  • もう一度この画面に戻ってくる

場合に、○字!の状態が保存されたままでした。
(これを改善しないと、アプリを再起動しない限り字数のカウントがリセットされません)

そこで、
StateNotifierProvider.autoDisposeというかたちで修飾子をつけることで、先のRiverpod公式が言うように

  • ユーザが別の画面に遷移してまた戻って来る際に、ステートをリセットしてデータ取得をやり直す

ことができました。

Discussion