Skip to content
Advertisement

redux state gets -improperly- updated before reducers is called (w/ ReactDnD)

Edit: the bug was is a separated helper function that was mutating the state (not displayed in the post).


I’m experimenting with ReactDnD to create a sortable image grid via drag and drop. I’ve been following this tutorial 1 and trying to implement it with redux instead of React Context.

The issue that I’m having is that my props don’t get updated after I re-arrange the images. I have been debugging the reducers and noticed that the state gets somehow updated before the reducer has the chance to do so (which would trigger mapStateToProps to reload my component with the updated state). The problem though it that I have no idea why that happens. I have the feeling that since ReactDnD is also using Redux, it’s somehow causing this.

Here are the different parts:

Index.js

JavaScript

App.js (parent component of DroppableCell and DraggableItem)

JavaScript

DroppableCell (calling the action creator from parent component)

JavaScript

DraggableItem

JavaScript

Reducer

JavaScript

The action creator

JavaScript

Advertisement

Answer

found the bug – unfortunately was outside the code posted as I thought it was a simple helper function. I realised I was using the ‘splice’ method to rearrange the imageArray, and therefore mutating the state.

User contributions licensed under: CC BY-SA
10 People found this is helpful
Advertisement