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

Question

我有几条路线使用同一个控制器：

<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
            });
        });
    };
 }

在初始页面加载时这有效，returns 来自 api 的数据并呈现内容。然而，在更改路线时，loadSearch 函数被触发，但 dispatch（returns 实际数据）没有。

Answer 1

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

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

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

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

React: Dispatch not firing on route change

javascript

reactjs

redux

react-redux