Drag & Drop Reorderable Grid List With REACT + REDUX

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!

• First, you need to set up the Redux in your React project. You guys can take a reference from https://medium.com/backticks-tildes/setting-up-a-redux-project-with-create-react-app-e363ab2329b8 to set up your modular Redux store.
• Inside react-sortable-hoc, There are basically three basic components (SortableContainer, SortableElement) that are helping us achieve the drag & drop functionality. SortableContainer will act as a list container (Unordered List - <ul>) which will contain the list item as SortableElement wrapped around a list item. 
• Let’s define some dummy data inside our root redux state as our initialState which is going to be used for the list item representation in a grid layout.

const initialState = {
  list: [
    {id: Math.random(), imgUrl: "https://upload.wikimedia.org/wikipedia/commons/d/de/Windows_live_square.JPG"},
   {...},
   {...},
  ]
}

• Create a new directory Container where we are going to create a new component AppContainer through which our redux state will be injected into the App Component.
• Inject the data as

const mapStateToProps = (state) => {return {    data: state.list  }};

• orderList Function as

const mapDispatchToProps = (dispatch, props) => ({
  orderList: ({oldIndex, newIndex}) => {
    dispatch(listActions.orderList(oldIndex, newIndex))
  }
});

• Now we have the data available in the App, we now need to render these items and I am using Bootstrap 4 to make the grid layout and it is pretty straightforward to implement

<SortableComponent data={this.props.list} onSortEnd={this.props.orderList}/>

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/