CODEWITHSUNDEEP
reactjsreduxreact-redux
Nikhita Patankar
Nikhita Patankar

Reputation: 33

React lifecycle hooks not working on redux state update

I'm using react with typescript and react-redux package.

did configure component as in documentations - https://react-redux.js.org/introduction/quick-start

console.log is working on connect function but component lifecycle not working.

container.ts

import Toolbar from './Toolbar.Component';


export default connect<any, any, any>((store:any) => {
    console.log('++++++++++++++++++++',store.toolbarComponent);
    return store.toolbarComponent
}, {})(Toolbar)```

component.ts

export default class ToolbarComponent extends React.Component<Props, State> {  

    constructor(props: Props) {
        super(props);
        this.state = {
            activeProperty: '',
            toolbarList: this.props.toolbarList
        };
        console.log('--- comp init ---', this.state);
        this.dispatchData = this.dispatchData.bind(this);
    }

    UNSAFE_componentWillUpdate(){
        console.log('-----', this.props.toolbarList, this.state.toolbarList)
    }

    componentWillUpdate(){   
        console.log('-----', this.props.toolbarList, this.state.toolbarList)
    }

    componentWillReceiveProps(){
        console.log('-----', this.props.toolbarList, this.state.toolbarList)
    }
    componentDidUpdate(){
        console.log('-----', this.props.toolbarList, this.state.toolbarList)
    }
}

Upvotes: 2

Views: 304

Answers (1)

Sunil Kashyap
Sunil Kashyap

Reputation: 2984

try with the spread operator

import Toolbar from './Toolbar.Component';

export default connect<any, any, any>((store:any) => {
    return { ...store.toolbarComponent }  <-- Here
}, {})(Toolbar)

Explanation - Component hooks is not detecting changes in store.toolbarComponent object and spread operator clone the store.toolbarComponent object and pass the cloned version.

Upvotes: 1

Related Questions