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

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

to learn its api.This blog

provides the detailed explanation of how to use ImmutabilityProvider in

the React-Redux application.