Generally, a lot of devs face problem when it comes to drag and drop functionality implementation and its integration with the Redux states is a big pain. Well, we all can do in some way with some workarounds but what should be the actual process of its implementation and what coding patterns to be followed to make it as performant and as reusable as possible.
We are going to use React-sortable-hoc, a cool React Lib, available to implement the drag & drop, is going to be our base of the implementations. We will also see how the data is sent to the Sortable component through Redux store and how the corresponding data is updated on reordering of the list.
DEMO URL : https://qed42.github.io/react-redux-reorderable-grid/
Let’s Get Started!
Where the list is the data and orderList is a function, coming from the AppContainers followed by redux, will provide data and take care of the order of the list.
Summary
Let’s look at the summary of our implementation. The data is being fetched from the redux state along with a callback called orderList, which is injected into the App component through AppContainer. Finally, we have defined a template to be wrapped inside the SortableElement which would act as a Grid List Item. Sortable Component wrapper inside App component takes over to handle the drag and drop stuff. Now if you see the business logic to reorder and fetch the list is completely separated from the UI and reordering of the list is achieved with minimal efforts.
Complete code - https://github.com/vishalchandna1/react-example/tree/redux-sortable-dnd
DEMO URL : https://qed42.github.io/react-redux-reorderable-grid/