react-sortable-tree icon indicating copy to clipboard operation
react-sortable-tree copied to clipboard

How to use props with redux ?

Open nicoclau opened this issue 3 years ago • 1 comments

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 avatar Feb 01 '22 23:02 nicoclau

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

nicoclau avatar Feb 02 '22 09:02 nicoclau