Despite a successful update of my state (checked through console.log and redux devtools) I cannot get my views to re-render
You can view the code at https://github.com/attendanceproject/djattendance/tree/attendance-redux/ap/static/react-gulp/app
Most of the code is in the scripts folder, the most important parts pertaining to my problem are below. I'm trying to re-render every time the previous or next button is pressed in the WeekBar component so that the date in there updates accordingly.
container code
class Attendance extends Component {
render() {
const { dispatch, trainee, date, events, rolls, slips, selectedEvents } = this.props
console.log('this.props', this.props)
return (
<div>
<div>
<Trainee trainee={trainee} />
<WeekBar
date={date}
onPrevClick={date => dispatch(prevWeek(date))}
onNextClick={date => dispatch(nextWeek(date))}/>
</div>
<hr />
</div>
)
}
}
Attendance.propTypes = {
trainee: PropTypes.shape({
name: PropTypes.string,
id: PropTypes.number,
active: PropTypes.bool
}).isRequired,
date: PropTypes.object.isRequired,
events: PropTypes.array.isRequired,
rolls: PropTypes.array.isRequired,
slips: PropTypes.array.isRequired,
selectedEvents: PropTypes.array
}
function select(state) {
return {
trainee: state.trainee,
date: state.date,
events: state.events,
rolls: state.rolls,
slips: state.slips,
selectedEvents: state.selectedEvents,
}
}
export default connect(select)(Attendance)
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)
}
}
WeekBar.propTypes = {
onPrevClick: PropTypes.func.isRequired,
onNextClick: PropTypes.func.isRequired,
date: PropTypes.object.isRequired,
}
reducer code
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
}
}
export default handleWeek