[英]React/Redux State is empty on second action call
我仍然是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 ( <Component {...this.props} /> ); } }; }
我需要运行第一个动作(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, 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) => { return api('search', {locationId: getState().destination.id, rows: rows}).then((response) => { const properties = response.results.map(formatPropertiesData); dispatch({ type: PROPERTIES_SUCCESS, properties }); }); }; }
然后在组件中我只请求一个动作:
export default connect(mapStateToProps)( connectDataFetchers(Search, [loadSearch]) );
您在fetchData()方法中使用Promise.all():您的操作是并行调度的,而不是一个接一个地调度。
要确保您调用第一个目标,然后调用属性,您应该为搜索组件创建一个特定的异步操作创建器。 此异步操作创建者将在此情况下实现您需要的连续请求。
我同意@ pierrepinard_2。
使用promise.map从蓝鸟,你应该能够syncronously调用所有给出的承诺。
这篇关于堆栈溢出的帖子可以帮助你解决这个问题。
如果有效,请告诉我们
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.