在第二个动作调用中，React / Redux状态为空

对于React / Redux，我还是比较新的，所以如果这是一个简单的问题，但是我还没有find解决scheme，我很抱歉。

我有两个动作：

// 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的build议pipe理这个工作

我创build了一个新的动作，以我需要的顺序发送另外两个动作：

 // 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]) ); 

Answer 1

你可以在你的fetchData（）方法中使用Promise.all（）：你的动作是并行调度的，而不是一个接一个的。

为确保您调用第一个目标，然后调用属性，您应该为search组件创build一个特定的asynchronous操作创build器。 这种asynchronous动作创build者将在这种情况下实现您需要的连续请求。

Answer 2

我同意@ pierrepinard_2。

使用蓝鸟的promise.map，你应该可以同时调用所有给定的promise。

这个post在堆栈溢出应该可以帮助你解决这个问题。

让我们知道它是否有效