javascript – 第二次操作调用时React / Redux State为空

我仍然是React / Redux的新手,如果这是一个简单的问题我很抱歉,但我还没有找到解决方案.

我有两个动作：

// DESTINATIONS
// ==============================================

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

export function loadDestination (params,query) {

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





// PROPERTIES
// ==============================================

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) => {

        console.log(getState());

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

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

这些与他们的相对减速器相结合：

// DESTINATIONS REDUCERS
// ==============================================

export default function destination (state = [],action) {
    switch (action.type) {
    case DESTINATION_SUCCESS:
        return action.destination;
    default:
        return state;
    }
}





// PROPERTIES REDUCERS
// ==============================================

export default function properties (state = [],action) {
    switch (action.type) {
    case PROPERTIES_SUCCESS:
        return action.properties;
    default:
        return state;
    }
}

并且它们是从组件内调用的(connectDataFetchers循环遍历被调用的操作并将它们返回到用于服务器端呈现的组件)：

// PROPTYPES
// ==============================================

Search.propTypes = {
    destination: PropTypes.object.isrequired,properties: PropTypes.array.isrequired
};





// ACTIONS
// ==============================================

function mapStateToProps ({destination,properties}) {
    return {destination,properties};
}





// CONNECT & EXPORT
// ==============================================

export default connect(mapStateToProps)(
    connectDataFetchers(Search,[loadDestination,loadProperties])
);

export default function connectDataFetchers (Component,actionCreators) {
    return class DataFetchersWrapper extends React.Component {
        static propTypes = {
            dispatch: React.PropTypes.func.isrequired,location: React.PropTypes.object.isrequired,params: React.PropTypes.object.isrequired
        };
        
        static fetchData (dispatch,params = {},query = {}) {
            return Promise.all(
                actionCreators.map((actionCreator) => dispatch(actionCreator(params,query)))
            );
        }

        componentDidMount () {
            DataFetchersWrapper.fetchData(
                this.props.dispatch,this.props.params,this.props.location.query
            );
        }

        render () {
            return (


我需要运行第一个动作(loadDestination),它将返回一个ID,然后需要传递给第二个动作以加载具有该位置ID的属性.
如果我对locationID进行硬编码,则可以正常工作,但如果我尝试通过getState()访问loadProperties中的状态,则返回{destination：[],properties：[]}.
有没有办法通过状态访问第一个动作的值？
解
根据@ pierrepinard_2的建议进行管理以使其工作
我创建了一个新动作,按照我需要的顺序调度其他两个动作：

// SEARCH
// ==============================================

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

// DESTINATIONS
// ==============================================

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

export function loadDestination (params,{url: `/accommodation${state}${region}${area}`}).then((response) => {
            const destination = formatDestinationData(response);
            
            dispatch({
                type: DESTINATION_SUCCESS,destination
            });
        });
    };
}
  
  // PROPERTIES
// ==============================================

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

export function loadProperties (params,getState) => {
        return api('search',{locationId: getState().destination.id,properties
            });
        });
    };
}
然后在组件中我只请求一个动作：

export default connect(mapStateToProps)(
    connectDataFetchers(Search,[loadSearch])
);


最佳答案
您在fetchData()方法中使用Promise.all()：您的操作是并行调度的,而不是一个接一个地调度.
要确保您调用第一个目标,然后调用属性,您应该为搜索组件创建一个特定的异步操作创建器.此异步操作创建者将在此情况下实现您需要的连续请求.
 原文链接：https://www.f2er.com/js/429003.html

javascript – 第二次操作调用时React / Redux State为空

猜你在找的JavaScript相关文章