frontend-collective / react-sortable-tree

Drag-and-drop sortable component for nested data and hierarchies
https://frontend-collective.github.io/react-sortable-tree/
MIT License
4.9k stars 897 forks source link

How to use props with redux ? #923

Open nicoclau opened 2 years ago

nicoclau commented 2 years ago

Hello the examples use State. But i need to use Props of redux.

Can you give me a sample of using Props with sortable tree?

It seems the sortable tree component only uses the State to function normally. So I need to know how to update the state once the props is updated by redux (here a search is done in another component, the search result will be displayed in the sortable tree)

Thanks ! :)

nicoclau commented 2 years ago

I made it work but it was really not natural.

I had to use getDerivedStateFromProps to check the state and props values. This method is rarely used and can help build the state from the props.

In the method, I had to check the first node title values in state and props

case 1 if they are not different, it means that the props didn't change, only the state is updated by the sortable tree component by adding expanded= true when we expand the tree.

So we do nothing and return null ==> it will keep the new state returned by the sortable tree with expanded nodes.

case 2 If they are different, ​we update the state (used by the component) with the props by doing this: It is like rendering the component with brand new data in the state.

{ treeData: props.data.treeData }

Here the code

static getDerivedStateFromProps(props, current_state) {

// case 1 No change of props passed down from redux store, only the state is updated
      ​if (props.data.treeData[0].title == current_state.treeData[0].title)
           ​return null;

//  case 2 props updated and passed down from redux store, we reset the state
       ​return { treeData: props.data.treeData }

   ​}

Can you tell me if it is the proper way? Thanks