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

前端之家收集整理的这篇文章主要介绍了javascript – 第二次操作调用时React / Redux State为空前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

我有两个动作:

  1. // DESTINATIONS
  2. // ==============================================
  3. export const DESTINATION_REQUEST = 'DESTINATION_REQUEST';
  4. export const DESTINATION_SUCCESS = 'DESTINATION_SUCCESS';
  5. export const DESTINATION_FAILURE = 'DESTINATION_FAILURE';
  6. export function loadDestination (params,query) {
  7. const state = params.state ? `/${params.state}` : '';
  8. const region = params.region ? `/${params.region}` : '';
  9. const area = params.area ? `/${params.area}` : '';
  10. return (dispatch) => {
  11. return api('location',{url: `/accommodation${state}${region}${area}`}).then((response) => {
  12. const destination = formatDestinationData(response);
  13. dispatch({
  14. type: DESTINATION_SUCCESS,destination
  15. });
  16. });
  17. };
  18. }
  19. // PROPERTIES
  20. // ==============================================
  21. export const PROPERTIES_REQUEST = 'PROPERTIES_REQUEST';
  22. export const PROPERTIES_SUCCESS = 'PROPERTIES_SUCCESS';
  23. export const PROPERTIES_FAILURE = 'PROPERTIES_FAILURE';
  24. export function loadProperties (params,query,rows = 24) {
  25. return (dispatch,getState) => {
  26. console.log(getState());
  27. return api('search',{locationId: xxxxxx,rows: rows}).then((response) => {
  28. const properties = response.results.map(formatPropertiesData);
  29. dispatch({
  30. type: PROPERTIES_SUCCESS,properties
  31. });
  32. });
  33. };
  34. }

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

  1. // DESTINATIONS REDUCERS
  2. // ==============================================
  3. export default function destination (state = [],action) {
  4. switch (action.type) {
  5. case DESTINATION_SUCCESS:
  6. return action.destination;
  7. default:
  8. return state;
  9. }
  10. }
  11. // PROPERTIES REDUCERS
  12. // ==============================================
  13. export default function properties (state = [],action) {
  14. switch (action.type) {
  15. case PROPERTIES_SUCCESS:
  16. return action.properties;
  17. default:
  18. return state;
  19. }
  20. }

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

  1. // PROPTYPES
  2. // ==============================================
  3. Search.propTypes = {
  4. destination: PropTypes.object.isrequired,properties: PropTypes.array.isrequired
  5. };
  6. // ACTIONS
  7. // ==============================================
  8. function mapStateToProps ({destination,properties}) {
  9. return {destination,properties};
  10. }
  11. // CONNECT & EXPORT
  12. // ==============================================
  13. export default connect(mapStateToProps)(
  14. connectDataFetchers(Search,[loadDestination,loadProperties])
  15. );
  1. export default function connectDataFetchers (Component,actionCreators) {
  2. return class DataFetchersWrapper extends React.Component {
  3. static propTypes = {
  4. dispatch: React.PropTypes.func.isrequired,location: React.PropTypes.object.isrequired,params: React.PropTypes.object.isrequired
  5. };
  6. static fetchData (dispatch,params = {},query = {}) {
  7. return Promise.all(
  8. actionCreators.map((actionCreator) => dispatch(actionCreator(params,query)))
  9. );
  10. }
  11. componentDidMount () {
  12. DataFetchersWrapper.fetchData(
  13. this.props.dispatch,this.props.params,this.props.location.query
  14. );
  15. }
  16. render () {
  17. return (

我需要运行第一个动作(loadDestination),它将返回一个ID,然后需要传递给第二个动作以加载具有该位置ID的属性.

如果我对locationID进行硬编码,则可以正常工作,但如果我尝试通过getState()访问loadProperties中的状态,则返回{destination:[],properties:[]}.

有没有办法通过状态访问第一个动作的值?

根据@ pierrepinard_2的建议进行管理以使其工作

我创建了一个新动作,按照我需要的顺序调度其他两个动作:

  1. // SEARCH
  2. // ==============================================
  3. export function loadSearch (params,query) {
  4. return (dispatch) => {
  5. return dispatch(
  6. loadDestination(params,query)
  7. ).then(() => {
  8. return dispatch(
  9. loadProperties(params,query)
  10. )
  11. })
  12. }
  13. }
  14. // DESTINATIONS
  15. // ==============================================
  16. export const DESTINATION_REQUEST = 'DESTINATION_REQUEST';
  17. export const DESTINATION_SUCCESS = 'DESTINATION_SUCCESS';
  18. export const DESTINATION_FAILURE = 'DESTINATION_FAILURE';
  19. export function loadDestination (params,{url: `/accommodation${state}${region}${area}`}).then((response) => {
  20. const destination = formatDestinationData(response);
  21. dispatch({
  22. type: DESTINATION_SUCCESS,destination
  23. });
  24. });
  25. };
  26. }
  27. // PROPERTIES
  28. // ==============================================
  29. export const PROPERTIES_REQUEST = 'PROPERTIES_REQUEST';
  30. export const PROPERTIES_SUCCESS = 'PROPERTIES_SUCCESS';
  31. export const PROPERTIES_FAILURE = 'PROPERTIES_FAILURE';
  32. export function loadProperties (params,getState) => {
  33. return api('search',{locationId: getState().destination.id,properties
  34. });
  35. });
  36. };
  37. }

然后在组件中我只请求一个动作:

  1. export default connect(mapStateToProps)(
  2. connectDataFetchers(Search,[loadSearch])
  3. );
最佳答案
您在fetchData()方法中使用Promise.all():您的操作是并行调度的,而不是一个接一个地调度.

要确保您调用第一个目标,然后调用属性,您应该为搜索组件创建一个特定的异步操作创建器.此异步操作创建者将在此情况下实现您需要的连续请求.

猜你在找的JavaScript相关文章