Redux: Container and components not re-rendering upon successful action dispatch

[davidhtien]

I've looked at
https://github.com/rackt/redux/issues/585
https://github.com/rackt/react-redux/issues/12

but can't seem to make my code work.
By console.log and redux devtools I can see that my state is successfully updated but there is no fresh render

the reducer

var date = moment()
function handleWeek(state = date, action) {
  switch (action.type) {
    case PREV_WEEK:
      console.log('PREV_WEEK')
      return Object.assign({}, state, {
        date: action.date.add(-7, 'd')
      })
    case NEXT_WEEK:
      return Object.assign({}, state, {
        date: action.date.add(7, 'd')
      })
    default:
      return state
  }
}

the container code

<WeekBar  
     date={date} 
     onPrevClick={date => dispatch(prevWeek(date))}
     onNextClick={date => dispatch(nextWeek(date))}
/>

the component code

export default class WeekBar extends Component {
  render() {
    console.log("render props", this.props)
    // var startdate = this.props.date.weekday(0).format('M/D/YY');
    // var enddate = this.props.date.weekday(6).format('M/D/YY');
    return (
      <div className="btn-toolbar" role="toolbar">
        <div className="controls btn-group">
          <button className="btn btn-info"><span className="glyphicon glyphicon-calendar"></span></button>
        </div>
        <div className="controls btn-group">
          <button className="btn btn-default clndr-previous-button" onClick={(e) => this.handlePrev(e)}>Prev</button>
          <div className="daterange btn btn-default disabled">
            {this.props.date.weekday(0).format('M/D/YY')} to {this.props.date.weekday(6).format('M/D/YY')}
          </div>
          <button className="btn btn-default clndr-next-button" onClick={(e) => this.handleNext(e)}>Next</button>
        </div>
      </div>
    );
  }

  handlePrev(e) {
    console.log("hello!", e)
    this.props.onPrevClick(this.props.date)
  }

  handleNext(e) {
    this.props.onNextClick(this.props.date)
  }
}

[roblafeve]

@davidhtien, you will need to expose state to your component via connect from react-redux. For your example above, you would not export your component directly as default, but rather, the wrapped version like this (copied from the docs):

// ...current code here

// Which part of the Redux global state does our component want to receive as props?
function mapStateToProps(state) {
  return {
    date: state.date
  }
}

// Which action creators does it want to receive by props?
function mapDispatchToProps(dispatch) {
  return {
    handlePrev: (date) => dispatch(prevWeek(date)),
    handleNext: (date) => dispatch(nextWeek(date)),
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(WeekBar)

Now, both your state and action creators are available via this.props. When date changes, your component should now know about it and update. If you connect this component directly, there would be no need to pass any properties to your component, so keep that in mind. Hope this is helpful :+1:

[gaearon]

Please provide _full_ code as a GitHub project.
Otherwise it's hard to help you.

Also this does not (so far) appear an issue with Redux itself. For this reason please ask on StackOverfow first. If nobody helps you there, we are happy to take a look, but it's best to avoid creating issues for "something doesn't work" questions unless you're sure you are using the library correctly.

[davidhtien]

Thank you guys for your quick responses! Sorry about spamming the issues section, wasn't quite thinking straight yesterday after a long day, totally slipped my mind to post on SO first. Thanks for helping out a noob

[gaearon]

No problem. Feel free to post a link to SO question here since we have this issue anyway ;-)

[davidhtien]

http://stackoverflow.com/questions/34376803/successful-dispatch-does-not-cause-re-render-even-thought-state-has-been-changed

@roblafeve I tried to add your code but I doesn't seem to work? I put it at the end of my component code and at the end of my container code

Thank you guys again for your help!

[gaearon]

I think the problem has to do with state mutation.
We describe it in "Troubleshooting" section of the docs by the way ;-)
Please see my answer.