#リアクティビティメカニズム：Observable

NocoBase 2.0 では、Observable リアクティブオブジェクトが至るところで使われています。これは基盤となるデータフローと UI の応答性の核であり、FlowContext、FlowModel、FlowStep といった様々な場面で広く利用されています。

#Observable を選ぶ理由

NocoBase が Redux、Recoil、Zustand、Jotai といった他の状態管理ソリューションではなく Observable を選んだ主な理由は以下の通りです。

• 究極の柔軟性：Observable は、あらゆるオブジェクト、配列、Map、Set などをリアクティブにすることができます。深いネストや動的な構造を自然にサポートしており、複雑なビジネスモデルに非常に適しています。
• 非侵襲性：アクション、リデューサー、または追加のストアを定義することなく、元のオブジェクトを直接操作できるため、開発体験が非常に優れています。
• 自動依存関係追跡：コンポーネントを observer でラップするだけで、コンポーネントは使用されている Observable プロパティを自動的に追跡します。データが変更されると、手動で依存関係を管理することなく、UI が自動的に更新されます。
• React 以外のシナリオにも対応：Observable リアクティビティメカニズムは React だけでなく、他のフレームワークと組み合わせることもでき、より広範なリアクティブデータ要件を満たします。

#observer を使う理由

observer は Observable オブジェクトの変更をリッスンし、データが変動した際に React コンポーネントの更新を自動的にトリガーします。これにより、setState やその他の更新メソッドを手動で呼び出すことなく、UI をデータと同期させることができます。

#基本的な使い方

import React from 'react';
import { Input } from 'antd';
import { observer, observable } from '@nocobase/flow-engine';

const obs = observable.deep({
  value: 'aa'
});

const MyComponent = observer(() => {
  return (
    <div>
      <Input
        defaultValue={obs.value}
        onChange={(e) => {
          obs.value = e.target.value;
        }}
      />
      <div>{obs.value}</div>
    </div>
  );
});

export default MyComponent;

リアクティブな使い方の詳細については、@formily/reactive のドキュメントをご参照ください。