CODEWITHSUNDEEP
reactjsredux
Affekt
Affekt

Reputation: 23

Accessing redux state in ComponentDidMount

I'm facing an issue with Redux and React

I use a redux action to fetch data from an API. When the component mounts, this action is fired and populate the Redux state. I want a second action to be fired with parameters (article) from the redux state.

My issue is that when I fire the second action, the redux state is still empty, so article is null, which causes an error.

componentDidMount() {

  const { targetArticle, userVisit, match, article } = this.props

  targetArticle(match.params.slug); 

  userVisit(match.params.slug, article.title);

}

I've already checked other topics on the subject like this one, but none of them works for me. How can I achieve that?

Thanks

Upvotes: 0

Views: 959

Answers (1)

bgaynor78
bgaynor78

Reputation: 454

You'd probably have to use componentDidUpdate lifecycle method. So given that userVisit is dependent on the result of targetArticle and assuming you are looking to this.props. for the updated Redux state, something like this should get you there:

componentDidUpdate(prevProps) {
  if(prevProps.article !== this.props.article) {
    // Now you have access to targetArticle's result and updated Redux state
    userVisit(match.params.slug, this.props.article.title)
  }
}

More in the docs: https://reactjs.org/docs/react-component.html#componentdidupdate

Upvotes: 5

Related Questions