caplin / FlexLayout

Docking Layout Manager for React
MIT License
920 stars 174 forks source link

Can accept latest data into function component when useSelector updated? #332

Closed varnguyen closed 2 years ago

varnguyen commented 2 years ago

Hello, My problem: I have a state is links use useSelector and a Factory component contains LinkWrapper like this.

Question: So how can I get latest data into each component when useSelector updated?

Example:

const links = useSelector((state:RootState) => state.links || [{ id:1, data: { value: 1 } }])

const FirstComponent = () => {
  return <div>
           <button onClick={()=> dispatch(setLinks([{ id:1, data: { value: 2 } }]))}></button>
         </div>
}

const SecondComponent = () => {
const links = useSelector((state:RootState) => state.links)

const updateLinks = () => {
console.log('links :  ', links)
=> links here is [{ id:1, data: { value: 1 } }] not [{ id:1, data: { value: 2 } }]
}

 return <div>
           <button onClick={updateLinks}></button>
         </div>
}

const factory = (node) => {
 const component = node.getComponent()

 if(component === 'firstComponent') {
   return (<LinkWrapper><FirstComponent /></LinkWrapper>)
  }

 if(component === 'secondComponent') {
   return (<LinkWrapper><SecondComponent /></LinkWrapper>)
  }

}

Thanks.

varnguyen commented 2 years ago

I solved my problem using store.getState()