React-Redux Support

In addition to the full blown support for React, Wijmo also provides a dedicated support for Redux, with its one-way data flow and the requirement for data immutability.

Redux imposes additional restrictions on how a data can be processed in your application. This lies in that the source data your components consume can't be mutated directly. Instead, you should dispatch information about data changes into the Redux Store, thereby allowing Redux reducers to make actual changes into data. After that your UI controls are updated with the new changed data.

This specific workflow is not a problem for simple UI input components, like InputNumber or DateEdit. In this case control's value property is bound to the parent component property, and valueChanged event is used to dispatch a data change action to the Store, instead of mutating a local data.

The problem arises with complex controls like editable data grids, which are designed to directly mutate the underlying data. This functionality gets into contradiction with the Redux requirement for data immutability. As a result, an editable FlexGrid component, which works fine in a regular React application, becomes useless for data editing in Redux application, and can be used as a read-only data grid only.

Wijmo provides you with a solution for this issue, which allows you to keep FlexGrid data editing capabilities, while preventing direct mutation of the underlying data. With the help of this solution, FlexGrid can be used for data editing even in Redux applications.

The wanted functionality can be achieved using the ImmutabilityProvider component, which is being attached to FlexGrid component, changes its behavior in the following way:

• Prevents FlexGrid from mutating the underlying data array in response to user edits.
• Triggers data change event, which is used to dispatch data change actions to the Redux Store.

Data then passes through the Redux reducers, and returns back to the grid to reflect the changes. But all this complex data flow doesn't affect user the experience. For end user, everything looks as if one was editing a regular grid, which updates the underlying data directly.

Use the Editable Redux Grid sample to see the ImmutabilityProvider in action.
Refer to the ImmutabilityProvider documentation to learn its api.
This blog provides the detailed explanation of how to use ImmutabilityProvider in the React-Redux application.