Vincas Stonys Vincas Stonys - 11 months ago 71
React JSX Question

React router + redux navigating back doesn't call componentWillMount

Currently I pre-load data from api in container component's lifecycle method componentWillMount:

componentWillMount() {
const { dept, course } = this.props.routeParams;
this.props.fetchTimetable(dept, course);

It is called when user navigates to route
, and it works fine, until you navigate from let's say:
and then press back button. The component is not actually reinitialized, so the lifecycle method is not called, and the data isn't reloaded.

Is there some sort of way to reload data in this case? Should I maybe use another method of preloading data? I see react router emits
event on any location change, including navigating back, so maybe I can somehow use that?

If it matters, here's is how I implement data loading:

import { getTimetable } from '../api/timetable';


const requestTimetable = () => ({ type: REQUEST_TIMETABLE, loading: true });
const receiveTimetable = (timetable) => ({ type: RECEIVE_TIMETABLE, loading: false, timetable });

export function fetchTimetable(departmentId, courseId) {
return dispatch => {
getTimetable(departmentId, courseId)
.then(timetable => dispatch(receiveTimetable(timetable)))

Answer Source

You need to use componentWillReceiveProps to check if new props (nextProps) are same as existing props (this.props). Here's relevant code in Redux example:

componentWillReceiveProps(nextProps) {
  if (nextProps.dept !== this.props.dept || nextProps.course !== this.props.course) {
    dispatch(fetchTimetable(nextProps.dept, nextProps.course))