CODEWITHSUNDEEP
javascriptreactjsredux
user1354934
user1354934

Reputation: 8841

Redux - reducer is successfully updated, but connected component's componentWillReceiveProps still shows the old state

I'm firing off an action when I get the user's current location to find markers within that location. I get the data, update my reducer.

However, when I console.log(this.props) in my componentWillReceiveProps, I still see the old state. If I navigate to another route, and then come back, I can see the updated props from the console log from componentWillReceiveProps.

UPDATE: This was due to lack of understanding on my part of the component lifecycle. Look at the answer below :) .

Upvotes: 0

Views: 139

Answers (1)

The Brofessor
The Brofessor

Reputation: 2391

That is the intended behavior! That function is called before the component rerenders, so that you can compare old state to 'current' state.

The reducer updates the state tree, which tells the connected component to rerender, and at that point this.props should show you the old state of the component.

After the console.log, the component will continue to rerender unless directed otherwise, which is why when you navigate back you see the 'new props'.

The values that get passed through componentWillReceiveProps are the next props.

Your lifecycle code is essentially saying:

  1. Tell me my old props (prior to the connector making me rerender)
  2. If there wasn't a loaded script, and now, after the reducer, there is: a. If the script load succeeded, reset map options and reinitialize b. If the script load failed, log an error to stdout

The doc's on the lifecycle are pretty excellent and can be found here

If that doesn't help out, where is the intended behavior of the component misfiring?

Upvotes: 2

Related Questions