In framework interops, this class is usually represented by a framework specific component, like a wijmo.react.grid.immutable.ImmutabilityProvider component for React, which is more convenient to use in the context of the framework.

The controlled FlexGrid control should not specify its itemsSource. Instead, the itemsSource property of this class instance should be assigned with the immutable array from the Store, which grid will display and edit.

When a user edits data via the datagrid, the wijmo.grid.immutable.ImmutabilityProvider.dataChanged event is triggered, bringing all the necessary information to you about the change (which item is affected, if item was changed or added or deleted, and so on). This event should be used to dispatch corresponding data change actions to the Store.

Note that FlexGrid edits data on a row level basis, which means that you can change multiple cell values in the same row, and only after you move focus out of the row, all the changes to the row will be applied simultaneously. Or you can press the Cancel key to cancel all the changes in the row. The same is true for adding a row into the datagrid.

Note also that some changes like pasting a text into the datagrid, or deleting rows, can affect multiple rows. In this case ImmutabilityProvider will trigger the ImmutabilityProvider.dataChanged event multiple times, separately for each affected row. This simplifies data change processing in the Store reducers.

This example demonstrates a fully editable FlexGrid component, with an associated ImmutabilityProvider component bound to an array from the Redux Store. The dataChanged event handler dispatches corresponding data change actions to the Store.

  import { ImmutabilityProvider, DataChangeEventArgs, DataChangeAction } from '@mescius/wijmo.grid.immutable';
  import { FlexGrid } from '@mescius/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;
  })