가 돌아 오는 componentWillMount를 호출하지 않습니다 다시 탐색 + 라우터 반응

Question

현재 I 컨테이너 구성 요소의 수명주기 방법 componentWillMount에서 API에서 사전 데이터를로드 :

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

사용자가 경로 /:dept/:course에 이동할 때라고하며, 그것을 잘 작동합니다 에서 탐색 할 때까지 /mif/31을 /mif/33으로 입력 한 다음 뒤로 버튼을 누릅니다. 구성 요소는 실제로 다시 초기화되지 않으므로 라이프 사이클 메서드가 호출되지 않으며 데이터가 다시로드되지 않습니다.

이 경우 데이터를 다시로드하는 방법이 있습니까? 데이터를 미리로드하는 다른 방법을 사용해야할까요? 나는 반응 라우터가 어떤 위치 변경에 LOCATION_CHANGE 이벤트를 내 보낸다는 것을 안다. 다시 돌아 다니는 것을 포함해서, 어쩌면 내가 어떻게 든 그것을 사용할 수 있을까? 당신을 가정

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

export const REQUEST_TIMETABLE = 'REQUEST_TIMETABLE'; 
export const RECEIVE_TIMETABLE = 'RECEIVE_TIMETABLE'; 

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

export function fetchTimetable(departmentId, courseId) { 
    return dispatch => { 
    dispatch(requestTimetable()); 
    getTimetable(departmentId, courseId) 
     .then(timetable => dispatch(receiveTimetable(timetable))) 
     .catch(console.log); 
    }; 
} 

Answer 1

새 소품 (nextProps)이 기존 소품 (this.props)과 동일한 지 확인하려면 componentWillReceiveProps을 사용해야합니다. 여기에 돌아 오는 예제에서 관련 코드입니다 : https://github.com/reactjs/redux/blob/e5e608eb87f84d4c6ec22b3b4e59338d234904d5/examples/async/src/containers/App.js#L13-L18

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

Answer 2

내가 잘못 여기있을 수 있습니다,하지만 난 당신이 찾고있는 기능이 componentWillMount 아니라고 생각하지만 componentWillReceiveProps,

:

이 중요한 경우, 여기 내가 데이터로드 기능을 구현하는 방법이다 (courseId와 같은) 변수를 redux 라우터에서 구성 요소로 전달하고 componentWillReceiveProps에서 setState를 사용하여 구성 요소를 다시 칠해야합니다.

그렇지 않으면, 당신은 상점의 변화에 ​​가입 할 수 있습니다 : http://redux.js.org/docs/api/Store.html

면책 조항 : 나는 아마 당신을 REDUX에 대해 덜 알고있다.