wijmo.react.grid.FlexGridコンポーネントに追加されたwijmo.react.grid.immutable.ImmutabilityProviderコンポーネントを使用すると、後者は基になるデータを変更せずにデータ編集を実行でssきます。代わりに、このクラスは、変更アクションをRedux _Store_などのグローバル_Store_にディスパッチするために使用できるデータ変更イベントを提供します。 制御された FlexGrid コントロールは、その itemsSource を指定しないでください。代わりに、このクラスインスタンスの itemsSource プロパティには、_Store_からの不変の配列を割り当てる必要があります。これにより、グリッドが表示および編集されます。

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

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

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

この例は、Redux Store_からの配列にバインドされた ImmutabilityProvider コンポーネントが関連付けられた完全に編集可能な FlexGrid コンポーネントを示します。 dataChangedイベントハンドラーは、対応するデータ変更のアクションを_Store_にディスパッチします。 この例では、_reux-redux _connect_メソッドを使用して、_Redux Store_データおよびアクション作成者関数がプレゼンテーションコンポーネントにプロパティとしてバインドされていると想定します。

import { DataChangeEventArgs, DataChangeAction } from '@grapecity/wijmo.grid.immutable';
import { ImmutabilityProvider } from '@grapecity/wijmo.react.grid.immutable';
import { FlexGrid } from '@grapecity/wijmo.react.grid';

export class GridView extends React.Component<any, any> {
  render() {
    return <FlexGrid allowAddNew allowDelete>
       <ImmutabilityProvider
          itemsSource={this.props.items}
          dataChanged={this.onGridDataChanged} />
    </FlexGrid>
  }
  onGridDataChanged(s: ImmutabilityProvider, e: DataChangeEventArgs) {
      switch (e.action) {
          case DataChangeAction.Add:
              this.props.addItemAction(e.newItem);
              break;
          case DataChangeAction.Remove:
              this.props.removeItemAction(e.newItem, e.itemIndex);
              break;
          case DataChangeAction.Change:
              this.props.changeItemAction(e.newItem, e.itemIndex);
              break;
      }
  }
}