【Mobx】reactionについて

MobXのreaction APIについて調べた

reactionとは？

MobXのリアクティビティシステムの一部で、特定のデータ（observable）の変化に反応して副作用を実行するためのAPI

特定の条件に基づいて副作用を発生させたい場合に使用する

また、autorunのようにすべての変更に反応するのではなく、特定のデータの変更時だけ処理を実行したい場合に使用する

基本構文

import { reaction, observable } from 'mobx';

const state = observable({
  count: 0,
});

const disposer = reaction(
  () => state.count,          // 第1引数: トラッキング対象のデータを返す関数
  (count, previousCount) => { // 第2引数: データの変化時に実行される副作用関数
    console.log(`Count changed from ${previousCount} to ${count}`);
  }
);

state.count = 1; // コンソール: "Count changed from 0 to 1"
state.count = 2; // コンソール: "Count changed from 1 to 2"

// リアクションを停止
disposer();

1. 第1引数（データの追跡関数）
   • reactionが追跡するデータを指定
   • 戻り値はobservableなデータに依存する必要がある
2. 第2引数（副作用関数）
   • 追跡対象のデータが変化したときに実行される関数
   • 引数:
     • 新しい値
     • 前の値
3. オプション設定（第3引数）
   • fireImmediately
     • trueにすると、reactionの初期化時にすぐに副作用関数が実行される

reactionとautorunの違い

特徴	reaction	autorun
反応の対象	特定のobservable（第1引数の関数が返す値）	実行中にアクセスしたすべてのobservable
実行タイミング	トラッキング対象が変更されたときだけ	どのobservableが変わっても再実行
初回実行	デフォルトでは初回は実行されない（オプション可）	登録時に即座に実行

---

reactionのユースケース

条件付き副作用の実行

   reaction(
     () => state.count > 5, // countが5を超えたかどうかを追跡
     (isGreaterThanFive) => {
       if (isGreaterThanFive) {
         console.log('Count is greater than 5!');
       }
     }
   );

APIコールのトリガー

   reaction(
     () => state.searchQuery, // 検索クエリの変更を追跡
     (query) => {
       fetch(`https://api.example.com/search?q=${query}`)
         .then(response => response.json())
         .then(data => {
           state.searchResults = data;
         });
     }
   );

ローカルストレージとの同期

   reaction(
     () => state.userPreferences,
     (preferences) => {
       localStorage.setItem('preferences', JSON.stringify(preferences));
     }
   );

注意点

• メモリリーク
  • reactionの実行が不要になったら必ずdisposerを呼び出して停止する
  • 特にReactコンポーネントなどのライフサイクル内で使用する場合、コンポーネントのアンマウント時に停止する必要がある

import { useEffect } from 'react';
import { reaction } from 'mobx';

useEffect(() => {
  const disposer = reaction(() => state.someValue, (value) => {
    console.log(value);
  });

  return () => disposer(); // クリーンアップ時に停止
}, []);