Im really struggling through this but I cannot get my component to rerender even though I can see the store is changing and yes Im not sure Im not mutating my original state.
Reducer:
const AssessmentReducer = (state = initialState, action) => {
switch (action.type) {
case GET_ASSESSMENT_INFO:
return { ...state, assessment: action.payload }
default:
return state
}
}
Action:
import { GET_ASSESSMENT_INFO } from '../reducers/AssessmentReducer'
import API from '../../api'
export function getAssessment(assessment) {
return {
type: GET_ASSESSMENT_INFO,
payload: assessment,
}
}
export function getAssesmentInfo(id) {
return function (dispatch) {
return API.get_all('assessments/' + id).then(
(response) => dispatch(getAssessment(response)),
(error) => console.log('An error occurred', error)
)
}
}
Component:
componentDidMount() {
const assessmentId = this.props.match.params.assessment_id
this.props.getAssesmentInfo(assessmentId)
}
/** A whole bunch of stuff in here ***/
render() {
console.log(this.props.assessment)
}
function mapStateToProps(state) {
return {
//screenQuestions: state.ScreenQuestionsReducer.screenQuestions,
assessment: state.AssessmentReducer.assessment,
}
}
export default connect(mapStateToProps, { getAssesmentInfo })(
withStyles(styles)(AssessmentTabs)
)
Im seeing my initial state being logged in the render, Can validate the action is called and dispatched to the reducer with the correct payload. But the console log in the render is never hit again. Using redux dev tools, the state is being updated correctly as well.
Any ideas?
EDIT:
as soon as a click a button in my component and update the state, it reads in the new props from redux no problem