Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to use props with redux ? #923

Open
nicoclau opened this issue Feb 1, 2022 · 1 comment
Open

How to use props with redux ? #923

nicoclau opened this issue Feb 1, 2022 · 1 comment

Comments

@nicoclau
Copy link

nicoclau commented Feb 1, 2022

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
Copy link
Author

nicoclau commented Feb 2, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant