反应：调度不会在路线更改时触发答案

【问题标题】：React: Dispatch not firing on route change反应：调度不会在路线更改时触发
【发布时间】：2016-05-03 05:58:24
【问题描述】：

我有几条路线使用相同的控制器：

<Route component={Search} path='/accommodation(/:state)(/:region)(/:area)' />

当路由改变时，我从组件内部调用 api 函数：

componentWillReceiveProps = (nextProps) => {
    if (this.props.params != nextProps.params) {
        loadSearch(nextProps.params);
    }
}

这是一个动作如下：

export function loadSearch (params) {
    return (dispatch) => {
        return dispatch(
            loadDestination(params)
        ).then(() => {
            return dispatch(
                loadProperties(params)
            );
        });
    };
}

加载：

export const DESTINATION_REQUEST = 'DESTINATION_REQUEST';
export const DESTINATION_SUCCESS = 'DESTINATION_SUCCESS';
export const DESTINATION_FAILURE = 'DESTINATION_FAILURE';

export function loadDestination (params) {
    const state = params.state ? `/${params.state}` : '';
    const region = params.region ? `/${params.region}` : '';
    const area = params.area ? `/${params.area}` : '';

    return (dispatch) => {
        return api('location', {url: `/accommodation${state}${region}${area}`}).then((response) => {
            const destination = formatDestinationData(response);

            dispatch({
                type: DESTINATION_SUCCESS,
                destination
            });
        });
    };
 }

export const PROPERTIES_REQUEST = 'PROPERTIES_REQUEST';
export const PROPERTIES_SUCCESS = 'PROPERTIES_SUCCESS';
export const PROPERTIES_FAILURE = 'PROPERTIES_FAILURE';

export function loadProperties (params, query, rows = 24) {
    return (dispatch, getState) => {

        const locationId = getState().destination.id || 99996;

        return api('search', {locationId, rows}).then((response) => {
            const properties = response.results.map(formatPropertiesData);

            dispatch({
                type: PROPERTIES_SUCCESS,
                properties
            });
        });
    };
 }

在初始页面加载时，这可以工作并从 api 返回数据并呈现内容。但是在更改路线时，loadSearch 函数会被触发，但dispatch（返回实际数据）不会。

【问题讨论】：

请提供loadDestination 和loadProperties 的代码。
@bhargavponnapalli - 添加了这些功能。通过将console.log 添加到其中任何一个中，我可以看到初始页面加载，但不会在路由更改时再次触发

标签： javascript reactjs redux react-redux

【解决方案1】：

请将您的代码更改为此。你错过了dispatch。

假设：您正在使用 redux-thunk，并且组件可以通过 props（已连接）访问调度。既然您提到您在页面加载时进行调度，我认为情况就是这样。

componentWillReceiveProps = (nextProps) => {
   const {dispatch} = this.props;
   if (this.props.params != nextProps.params) {
      nextProps.dispatch(loadSearch(nextProps.params));
   }
}

【讨论】：