The **ImmutabilityProvider** object, being attached to a FlexGrid control, allows the latter to perform data edits without mutating the underlying data. Instead, this class provides a data change event, which can be used to dispatch change actions to the global _Store_, such as a Redux _Store_.

In framework interops, this class is usually represented by a framework specific component, like a 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 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 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;
  })