Zenn
📚

ephemeral state and app state

に公開
Flutter
Dart
tech

一時的な状態とアプリの状態を区別する

こちらは、公式の解説を日本語に翻訳しております。

このドキュメントでは、アプリの状態、一時的な状態、および Flutter アプリでそれぞれを管理する方法について説明します。

最も広い意味では、アプリの状態とは、アプリの実行中にメモリ内に存在するすべてのものです。これには、アプリのアセット、Flutter フレームワークが UI に関して保持するすべての変数、アニメーションの状態、テクスチャ、フォントなどが含まれます。この最も広い状態の定義は有効ですが、アプリの設計にはあまり役立ちません。

まず、一部の状態 (テクスチャなど) は管理する必要がありません。フレームワークがそれらの状態を処理します。したがって、状態のより便利な定義は、「任意の時点で UI を再構築するために必要なデータ」です。次に、自分で管理する状態は、一時的な状態とアプリの状態という 2 つの概念的なタイプに分けることができます。

一時的な状態

一時的な状態 ( UI 状態またはローカル状態と呼ばれることもあります) は、単一のウィジェットにきちんと含めることができる状態です。

これは意図的に曖昧な定義なので、いくつか例を挙げます。

  • 現在のページPageView
  • 複雑なアニメーションの現在の進行状況
  • 現在選択されているタブBottomNavigationBar
    ウィジェット ツリーの他の部分では、このような状態にアクセスする必要はほとんどありません。シリアル化する必要はなく、複雑な方法で変更されることもありません。

つまり、この種類の状態では状態管理技術 (ScopedModel、Redux など) を使用する必要はありません。必要なのは だけですStatefulWidget。

以下に、下部のナビゲーション バーで現在選択されている項目がクラス_indexのフィールドにどのように保持されるかを示します_MyHomepageState。この例では、_index一時的な状態です。

class MyHomepage extends StatefulWidget {
  const MyHomepage({super.key});

  @override
  State<MyHomepage> createState() => _MyHomepageState();
}

class _MyHomepageState extends State<MyHomepage> {
  int _index = 0;

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: _index,
      onTap: (newIndex) {
        setState(() {
          _index = newIndex;
        });
      },
      // ... items ...
    );
  }
}

ここで、setState()StatefulWidget の State クラス内のフィールドとを使用するのは完全に自然です。アプリの他の部分で にアクセスする必要はありません_index。変数はウィジェット内でのみ変更されます。また、ユーザーがアプリを閉じて再起動した場合、 がゼロにリセットされてMyHomepageもかまいません。_index

アプリの状態

一時的ではなく、アプリの多くの部分で共有し、ユーザー セッション間で保持する状態を、アプリケーション状態 (共有状態と呼ばれることもあります) と呼びます。

アプリケーション状態の例:

  • ユーザー設定
  • ログイン情報
  • ソーシャル ネットワーキング アプリの通知
  • 電子商取引アプリのショッピングカート
  • ニュースアプリ内の記事の既読/未読状態
    アプリの状態を管理するには、オプションを調べる必要があります。選択は、アプリの複雑さと性質、チームのこれまでの経験、その他多くの側面によって異なります。続きをお読みください。

明確なルールはない

明確に言うと、と を使用してアプリ内のすべての状態を管理できます。実際、Flutter チームは多くのシンプルなアプリ サンプル (すべての に付属するスターター アプリを含む) でこれを行っています。StatesetState()flutter create

逆の場合も同様です。たとえば、特定のアプリのコンテキストでは、下部のナビゲーション バーで選択されたタブは一時的な状態ではないと判断する場合があります。クラスの外部から変更したり、セッション間で保持したりする必要があるかもしれません。その場合、変数は_indexアプリの状態です。

特定の変数が一時的なものかアプリの状態かを区別する明確で普遍的なルールはありません。場合によっては、一方を別のものにリファクタリングする必要があります。たとえば、最初は明らかに一時的な状態だったとしても、アプリケーションの機能が拡張するにつれて、アプリの状態に移行する必要が生じる場合があります。

そのため、次の図は鵜呑みにしないでください。

React の setState と Redux の store について尋ねられたとき、Redux の作者 Dan Abramov は次のように答えました。

「経験則としては、できるだけ気まずくないことをやることです。」

まとめると、Flutter アプリには概念的に 2 種類の状態があります。一時的な状態はStateと を使用して実装できsetState()、多くの場合、単一のウィジェットにローカルです。残りはアプリの状態です。どちらのタイプもどの Flutter アプリにも存在し、2 つのタイプに分けるかどうかは、ユーザーの好みとアプリの複雑さによって異なります。

Discussion