Integration with Redux

In this tutorial, you will connect a Handsontable grid to a Redux store. You will learn to dispatch actions on cell changes and sync grid data with global state.

[[toc]]

Integrate with Redux

::: tip

Before using any state management library, make sure you know how Handsontable handles data: see the Binding to data page.

:::

The following example implements the @handsontable/react-wrapper component with a readOnly toggle switch and the Redux state manager.

Simple example

::: example #example1 :react-redux --js 1 --ts 2 --deps redux@4 [email protected]

@code @code

:::

Advanced example

This example shows:

• A custom editor component (built with an external dependency, HexColorPicker). This component acts both as an editor and as a renderer.
• A custom renderer component, built with an external dependency (StarRatingComponent).

The editor component changes the behavior of the renderer component, by passing information through Redux (and the connect() method of react-redux).

::: example #example6 :react-advanced --js 1 --ts 2 --deps redux@4 [email protected] [email protected] [email protected]

@code @code

:::

What you learned

• You can connect a HotTable component to a Redux store using react-redux's connect() method.
• The afterChange hook dispatches Redux actions whenever the user edits a cell, keeping global state in sync.
• Custom editor and renderer components can read from and write to the Redux store, enabling grid cells to reflect shared application state.

Next steps

• Binding to data -- understand how Handsontable binds to different data structures.
• Saving data -- learn additional patterns for persisting grid changes.