React wrapper + redux is not working properly when sorting is enabled

Getting help Issues
1

Hello, I am using react wrapper with redux as shown in the documentation and there is a bug when sorting is enabled, here you can find a working example in https://jsfiddle.net/qfo0npcv/

The issue is that once a column is sorted when a cell is changed the sort stop being applied and the change is stored in the cell of the row that were in that position before the table was sort.

Is there a way to make redux and sorting work together?

2

Hi @jose,
It’s a similar case to Tracking rows by ID rather than index.

Our demo of usage wrapper and redux is just a simple example of how you can reflect readOnly changes in the redux store. We wanted to show that binding Handsontable in redux is possible. If you need more complex transformation, you have to prepare logic to translate visual<->physical indexes for rows and columns in your application.

There you can find useful methods:

However, I’ll point that we should modify our example to avoid confusion.
Thank you for your involvement!

3

Thanks for your answer @piotr.laszczkowski I managed to make it work using toPhysicalRow but after correctly saving the changes the sorting is reset.

I’ve tried using the same technique for changes but to save the new order, via columnSorting, but it is not working, I think it is causing an infinite loop.

Here it is a code example https://jsfiddle.net/3zuq61ov/3/

Do you know how should I do it?

4

Good morning, do you have any update on this? I was hoping to fix this bug before the end of the week.

5

Hi @jose,
I verified your case, and at the moment, there is no option to bind redux (and any other state-manager) with wrapper due to the Handsontable’s architecture of settings applying.
At the moment, options like data or columns will invoke recreation of index mappers.
On the other hand, plugins as columnSorting in their updatePlugin life-cycle will invoke the same hooks you use to save and update wrapper. That’s the reason why your example throws an error of infinite-loop.

I suggest using saving actions to the redux state to use these options in the rest of the application, but to communicate with the component (wrapper), use our API to do actions - until we decide if/when/how we will do https://github.com/handsontable/handsontable/issues/7263.

6

Ok, I will adapt the code to use the library API, but please could you update the documentation so it is easier to understand what needs to be done in a real world app to make good usage of redux and the React wrapper?

1 Like