反应:调度不触发路由更改 [英] React: Dispatch not firing on route change

问题描述

我有几个路由使用同一个控制器:

I have several routes that use the same controller:

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

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

and when the route is changed I call the api function from within the component:

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(返回实际数据).

On initial page load this works and returns data from an api and renders the content. However on changing the route, the loadSearch function is fired but the dispatch (which returns the actual data) doesn't.

推荐答案

请将您的代码更改为此.您错过了调度.

Please change your code to this. You missed a dispatch.

假设:您使用的是 redux-thunk，并且组件可以通过 props(已连接)访问 dispatch.既然你提到你是在页面加载时调度，我认为是这种情况.

Assumption : You are using redux-thunk, and the component has access to dispatch via props (connected). Since you mentioned that you are dispatching on page load, I think this is the case.

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

这篇关于反应:调度不触发路由更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！