React-redux: mapStateToProps called but components props not change?

Created on 10 Aug 2017  路  3Comments  路  Source: reduxjs/react-redux

I have two containers StatedUser and StatedHeader. which is connect with component User and Header They both recieve state.user as props. After some actions change state.user, component User props.user changes but Header not.

Here is my code container StatedHeader

import Header from '../components/common/Header'
import {connect} from 'react-redux'
import {showConfirm} from '../actions'

const mapStateToProps = state => {
  console.log(`header user --> ${JSON.stringify(state.user)}`)
  return {
    user: state.user,
    headerFix: state.headerFix       
  }
}

const mapDispatchToProps = dispatch => {
  return {
    openSignoutDialog: () => {
      dispatch(showConfirm(true))
    }
  }
}

const StatedHeader = connect(
  mapStateToProps,
  mapDispatchToProps)(Header)

export default StatedHeader

By the way, result of console.log found that state.user did change as expected, but components' props didn't change.
By the way , my reac-redux version is V5.0.5
any ideas about it ? Thanks!

Most helpful comment

Please post support questions to https://stackoverflow.com/ and be sure to show your reducers. 99% of the time, your reducer is mutating the current state object.

All 3 comments

Hi @cpprookie ! I think that stackoverflow is a better place for these kind of questions. I'm pretty sure that the maintainers will close this issue as soon as they see it, so if you want to buy some time just close it yourself and post the question on SO...

If I had to make a wild guess though I would say that the issue must have to do with the way that you wrote your reducer... You probably got a reducer that changes the properties of the user, but without returning a new instance... In other words, I think that you got an impure reducer. Keep in mind that redux-reducers are supposed to be pure-functions.

Please post support questions to https://stackoverflow.com/ and be sure to show your reducers. 99% of the time, your reducer is mutating the current state object.

I did post this question on stackoverflow with zero answer yesterday 0.0
Fortunenatelly, i fixed the bug and it looked like that i passed an object in props after defining new properties before dispatching actions. After using Object.assign() to create a new object, problem solved. I have no idea about the actual reason, but it did work. If you have interest, you can check (https://stackoverflow.com/questions/45611010/mapstatetoprops-called-but-components-props-not-change/45632015#45632015) for details.

Thanks for your help @josepot @jimbolla . I will be more cautious before opening isuue next time. Thanks community and hope my mistake could help others. :)

Was this page helpful?
0 / 5 - 0 ratings