【Mobx】Mobxという状態管理ライブラリ

MobXという状態管理ライブラリについて調べた

mobx.js.org

MobXは、JavaScriptで状態管理を簡単かつ効率的に行うためのライブラリ

リアクティブプログラミングの概念に基づいていて、アプリケーションの状態が変化した際に自動的にUIが更新される仕組みを提供する

基本概念

1. Observable
   MobXはオブジェクト、配列、マップなどを監視可能にする
   これにより、状態が変更されると自動的に変更を検知する

2. Observer
   ReactなどのUIフレームワークと組み合わせる場合、Observerとして機能するコンポーネントはObservableの変更を検知して再レンダリングする

3. Computed
   Observableから計算される派生状態
   依存するObservableが変更されると、自動的に再計算される

4. Action
   状態を変更する関数
   Observableを直接変更するのではなく、Actionを通じて状態を変更することが推奨される

主な特徴

• リアクティブ：状態とUIの同期が自動的に行われる
• ボイラープレートの少なさ：Reduxなどに比べて設定が少なく、シンプルなコードで管理可能
• パフォーマンス：必要な部分だけを更新するため、高パフォーマンス

どんな場合に使うべきか

• 状態管理が複雑になりがちなアプリケーション（特にフォームやリアルタイムデータの同期）
• Reduxのような明示的なフローが必要ない場合や、ボイラープレートを減らしたい場合

使い方

例

import { makeAutoObservable } from 'mobx';
import { observer } from 'mobx-react-lite';

class Store {
  @observable accessor count = 0;

  increment() {
    this.count++;
  }

  get doubleCount() {
    return this.count * 2;
  }
}

const store = new Store();

const Counter = observer(() => {
  return (
    <div>
      <p>Count: {store.count}</p>
      <p>Double Count: {store.doubleCount}</p>
      <button onClick={() => store.increment()}>Increment</button>
    </div>
  );
});

従来の状態管理アプローチに対するMobXの利点

1. 依存関係の自動追跡と更新
   • 従来の状態管理では、状態の変化に応じて、どのコンポーネントを更新する必要があるかを手動で管理する必要があった
   • これは、アプリケーションが複雑になるにつれて、コードの保守が困難になり、バグが発生しやすくなる原因となる
   • 一方、MobXは、実行時の依存関係分析 を使用して、オブザーバとオブザーバブルの関係を最小限かつ一貫性のあるセットに自動的に決定する
   • つまり、開発者は、どのコンポーネントがどの状態に依存しているかを明示的に宣言する必要がなく、MobXが自動的に依存関係を追跡し、必要なコンポーネントのみを更新する
   • これにより、コードの記述量が減り、保守性と信頼性が向上する
2. 細かい粒度のサブスクリプションによるオーバーサブスクリプションの削減
   • Fluxスタイルのような粗い粒度のサブスクリプションは、オーバーサブスクリプションを起こしやすく、不要な再レンダリングが発生する可能性がある
   • これは、コンポーネントが使用していない値やストアをサブスクリプションし続けるために発生する
   • MobXは、より細かい粒度のサブスクリプション を実現することで、オーバーサブスクリプションを最小限に抑えている
   • MobXは、リアクティブな計算を構成することで、1つのデータグラフを別のデータグラフに自動的に変換し、この派生を最小限のパッチで最新の状態に保つことができる
   • これにより、不要な再計算が減少し、パフォーマンスが向上する
3. 同期実行による状態の一貫性
   • MobXは、RxJSのように、すべてを同期的に実行する
   • これにより、状態の一貫性が保証 される
4. データグラフによる表現力の向上
   • MobXは、アプリケーションの状態をグラフ を使用して表現することを推奨している
   • グラフを使用すると、参照整合性を確保し、データの重複を回避できるため、派生値が最新の状態に保たれることが保証される
   • また、グラフは、問題領域のメンタルモデルに近い形で状態を表現できるため、複雑なアプリケーションの状態管理に適している
5. 簡潔で宣言的なコード
   • MobXは、状態管理を簡潔かつ宣言的に記述できるAPIを提供している
   • 開発者は、状態の変化を監視する必要のあるコンポーネントに observer デコレータを付けるだけで、MobXが自動的に依存関係を追跡し、更新を行う
   • これにより、コードの可読性が向上し、開発効率が向上する

参考

Becoming fully reactive: an in-depth explanation of MobX | by Michel Weststrate | HackerNoon.com | Medium