将数据传递给动作创建者并返回一个属性值

Question

我希望将数据从一个 API 获取请求传递到另一个。我要传递的属性是我的 API 返回的第一个属性的 ID。有了这个属性，我想将 ID 注入到第二个 API 调用中以专门调用一个对象。此端点将返回 ClickUrl。我想返回这个 URL 并将其注入到我认为的 Link href 中。

以下是我的视图，其中我映射了一个数组，该数组包含我的第一个 api 调用。我想将 promo.merch_id 传递回第二个 api 调用并返回 ClickUrl 的值。

class AZFeatStores extends Component {
  componentWillMount() {
    this.props.fetchPromo();
  }

  constructor(props) {
    super(props);
  }

  getPromoLink(merchantID) {
    this.props.fetchPromoClick(merchantID);
  }


  renderMerchPromo() {
    if(!this.props.promos) {
      return <div>Loading... </div>;
    }
    else {
      return this.props.promos.map((promo) => {
        return (
          <div className="feat-inner col-md-3" key={promo.promotion_id}>
            <div className="merch-img">
              <img src={promo.image_125} alt="merch-img"/>
            </div>
            <span className="cash-back">{promo.final_rebate} Cash Back </span>
            <Link to="This is where I want to inject the URL" className="shop-now">Shop Now</Link>
            <a href="#" className="learn-more">Learn More</a>
          </div>
        );
      });
    }
  }

  render() {
    return(
      <div className="col col-md-12">
        { this.renderMerchPromo() }
      </div>
    );
  }
}

function mapStateToProps(state) {
  return { promos: state.promos.all};
}


export default connect( mapStateToProps, { fetchPromo })( AZFeatStores );

我的动作创建者

export function fetchPromo() {

  const request = axios.get(`${ROOT_URL}/promos/${PROMO_ID}/ptypes/${PTYPE}`, {
    headers: headers
  });
  return {
    type: FETCH_PROMOS,
    payload: request 
  };
}

export function fetchPromoClick(merchantID) {
  const request = axios.get(`${ROOT_URL}/getclick/${merchantID}`, {
    headers: headers
  });
  return {
    type: FETCH_PROMO_LINK,
    payload: request 
  };
}

我的减速器

import { FETCH_PROMOS, FETCH_PROMO_LINK } from '../actions/promotions';

const INITIAL_STATE = { all: [] ,promo: null }; 

export default function ( state = INITIAL_STATE, action ) {
  switch (action.type) {
    case FETCH_PROMOS:
      return { ...state, all: action.payload.data.method_response.promos.merch.partner };
    case FETCH_PROMO_LINK:
      return { ...state, links: action.payload.data.method_response };
    default:
      return state;
  }
}

我是新手，所以不要讨厌我的代码:)

Answer 1

您可以等到第一个 API 调用的承诺得到解决，然后使用前一个 API 调用的响应调用第二个 API。最后像这样返回第二次调用的承诺。您只需在此处链接 API 调用，因为它们相互依赖。

export function fetchPromo() {

  const request = axios.get(`${ROOT_URL}/promos/${PROMO_ID}/ptypes/${PTYPE}`, {
    headers: headers
  }).then(response => {
    // Extract your ID value here.
    // Then call the second endpoint with that ID value.
    return axios.get('/user?ID={response.id}');   // using response.data
  });

  return {
    type: FETCH_PROMOS,
    payload: request 
  };
}

希望这会有所帮助。快乐编码！