https://zenn.dev/taichi221228/articles/d7de99a011055f

業務で状態管理ライブラリを使用したアプリケーションを作ることになったので、useStateuseEffect くらいしか使えない私が気合いで MobX を使ってみる。

MobX を選んだ理由

ドキュメントを読んでみる

まずは入門や概要を読んでノリを掴む。

  1. まず第一に、アプリケーションの状態があります。オブジェクトのグラフ、配列、プリミティブ、アプリケーションのモデルを形成するリファレンス。これらの値は、アプリケーションの「データセル」である。
  2. 第二に、派生物があります。基本的には、アプリケーションの状態から自動的に計算されるすべての値です。派生値や計算値には、未完成の TODO の数のような単純なものから、TODO を HTML で視覚的に表現したような複雑なものまで、さまざまなものがあります。スプレッドシートで言えば、アプリケーションの数式やグラフのようなものです。
  3. リアクションは導出と非常によく似ています。主な違いは、これらの関数が値を生成しないことです。その代わり、何らかのタスクを実行するために自動的に実行されます。通常は、I/O に関連するタスクです。DOM を更新したり、ネットワークへのリクエストを適切なタイミングで自動実行したりします。
  4. 最後に、アクションがあります。アクションとは、ステートを変更するすべてのものです。MobX は、あなたのアクションによって引き起こされるアプリケーションの状態のすべての変更が、すべての派生とリアクションによって自動的に処理されることを確認します。同期的に、そしてグリッチフリーで。

ちなみに先生は公式サポート 🔥

タスク管理アプリを作ってみる

準備

とりあえずお決まりの。

可愛くなるやつも入れる。

GitHubを参考にパッケージを入れてみる。 全部で5つあるみたい(参考) React と併用することが多いだけで、React の使用は必須ではないらしい。

  1. mobx
  2. mobx-react-lite
  3. mobx-react