フレームワークの相互運用では、このクラスは通常、フレームワーク固有のコンポーネントで表されます。たとえば、Reactのwijmo.react.grid.immutable.ImmutabilityProviderコンポーネントは、フレームワークのコンテキストで使用すると便利です。

制御されたFlexGridコントロールは、そのitemsSourceを指定しないでください。代わりに、このクラスインスタンスのitemsSourceプロパティには、_Store_からの不変の配列を割り当てる必要があります。これにより、グリッドが表示および編集されます。

ユーザーがdatagridを通じてデータを編集すると、wijmo.grid.immutable.ImmutabilityProvider.dataChangedイベントがトリガーされ、変更に関するすべての必要な情報が表示されます（項目が変更、追加、または削除されたときに影響を受ける項目など）。このイベントは、対応するデータ変更のアクションを_Store_にディスパッチするために使用します。

FlexGridは行レベルでデータを編集することに注意してください。つまり、同じ行の複数のセル値を変更でき、行からフォーカスを移動した後にのみ、行に対するすべての変更が同時に適用されます。または、_Cancel_キーを押して、行のすべての変更をキャンセルすることもできます。datagridに行を追加する場合も同様です。

また、テキストをdatagridに貼り付けたり、行を削除したりすると、複数の行に影響する可能性があります。この場合、ImmutabilityProviderはImmutabilityProvider.dataChangedイベントを複数回、影響を受ける行ごとに個別にトリガーします。これにより、_Store_レデューサーでのデータ変更処理が簡略化されます。

この例は、_Redux Store_からの配列にバインドされたImmutabilityProviderコンポーネントが関連付けられた完全に編集可能なFlexGridコンポーネントを示します。 dataChangedイベントハンドラーは、対応するデータ変更のアクションを_Store_にディスパッチします。

  import { ImmutabilityProvider, DataChangeEventArgs, DataChangeAction } from '@grapecity/wijmo.grid.immutable';
  import { FlexGrid } from '@grapecity/wijmo.grid';
  import { store } from './store';
  import { addItemAction, removeItemAction, changeItemAction } from './actions';

  const grid = new FlexGrid('#grid', {
      allowAddNew: true,
      allowDelete: true
  });
  const provider = new ImmutabilityProvider(grid, {
      itemsSource: store.getState().items,
      dataChanged: (s: ImmutabilityProvider, e: DataChangeEventArgs) => {
         switch (e.action) {
              case DataChangeAction.Add:
                  store.dispatch(addItemAction(e.newItem));
                break;
              case DataChangeAction.Remove:
                  store.dispatch(removeItemAction(e.newItem, e.itemIndex));
                  break;
            case DataChangeAction.Change:
                  store.dispatch(changeItemAction(e.newItem, e.itemIndex));
                  break;
         }
      }
  });
  store.subscribe(() => {
      provider.itemsSource = store.getState().items;
  })