Open4

FlutterをやっているとRecoilという言葉をよく聞くので調べてみる

oke331oke331

Recoilとは?

公式ページに A state management library for React (React用状態管理ライブラリっす)って書いてあって、 Facebook(Meta)によって提唱された 実験的な状態管理ライブラリらしい。

ちなみにReactは UIを構築するためのJavascriptライブラリ で、Webでよく使われていたり、モバイルではFlutterとよく比較される React Native で使用されている。
複雑なReactアプリケーションでは通常、状態管理・ルーティング・APIとの対話のための追加のライブラリが必要となるらしく、そこでRecoilとかが使われるらしい。

Reactの状態管理で思い出したが、僕はReduxとReactの違いがかなり最近までよくわかっていなかった。(似てるんだもん)
ReduxはReactでよく使用される状態管理の手法。

Reduxの詳しい説明は割愛するが、これから話すRecoilとの違いは1箇所でアプリケーションの状態を保持している という点かと思う。
このReduxを用いる懸念点としては、状態を空オブジェクトのみで更新してしまうと、アプリケーション上のデータはすべて消えてしまうってことがあったらしい。
参考:https://ics.media/entry/210224/

それに対して、Recoilは下で説明する「Atom」「Selector」と呼ばれる単位を使用してアプリケーションデータを管理する みたい。

基本的なRecoil用語

  • Atom
    • 基本的な状態保持の単位
      • 例: ユーザーの名前 を保持
  • Selector
    • Atomや他Selectorの値を用いて何らかの計算や加工・副作用(フィルタリングしたり使いたい文字に加工したりする)
      • 例:Atomを加工し、 ユーザーの名前 + さん という文字を保持
oke331oke331

なんでFlutterでRecoilの話題が出るの?

Riverpodが 直前に登場したRecoilにたまたま似てたから みたい。
IDとか指定して取得したい値変えたりする時に使うfamily っていう文字も、Recoilを参考にしてたみたい。
参考:https://twitter.com/_mono/status/1283539032945786881

下記のサイトはReactの状態管理考察の記事なんだけど、これを見るとRiverpod/FlutterHooks使ってきた人は「Flutterでやってきたことと似てる!」という進研ゼミ状態になります。
https://blog.uhy.ooo/entry/2021-07-24/react-state-management/

oke331oke331

RecoilをFlutter/Riverpodで用いるならどんな感じ?

ざっと下記のサイトを読んでみて、こんな感じで使うのかな?と現時点で考えていることをまとめる。
参考サイト:
https://nulab.com/ja/blog/nulab/recoil-example/
https://dev.classmethod.jp/articles/react-recoil-weather-app/
https://jasonwatmore.com/post/2021/09/10/react-recoil-set-atom-state-after-async-http-get-or-post-request

Atom

・Futureの処理がない場合

  • StateProviderとして型を定義(デフォルト値を定義)
    • 値変える必要ない時はProviderでも良いと思う。

・Futureの処理がある場合(API使用したり)

  • 取得するだけであればFutureProvider
  • 登録や更新もするのであればStateNotifierProvider
    • StateNotifierに登録や更新、取得処理を入れておくのが無難かと思う。(登録や更新後、Stateを更新する必要があるため)

Selector

・Futureの処理がない場合(フィルタリングしたり、使いたい文字に加工したり)

  • Providerとして定義し、Atomや他Selectorをwatchして値を随時更新。

・Futureの処理がある場合(Atomなどから受け取った文字を使用してAPI使用したり)

  • FutureProviderとして定義し、Atomや他Selectorをwatchして値を随時更新。
oke331oke331

一旦区切りがいいので終わりに

ざっと調べてみて書いてみました。(スクラップボックス使ってみたかった)
Recoilの考え方を使ってアプリを組んだことがないので、試してみたいなと思いつつ、既に使用されている方がいたらお知恵を拝借したいなと思う所存。
(もしサンプルリポジトリとか持ってる方いたらみてみたいなぁと思う)

うちはこんなやり方でやっていますとかあればコメント是非ください🙏