アクション作成者にデータを渡してプロパティ値を返す

Question

私は、あるAPIのリクエストを別のリクエストに渡すことを検討しています。私が渡したいプロパティは、私のAPIが返す最初のプロパティであるIDです。このプロパティを使用して、具体的にオブジェクトを呼び出すためにIDを2番目のAPI呼び出しに注入したいとします。このエンドポイントはClickUrlを返します。私はこのURLを返すと私のビューでリンクhrefに注入したいと思います。

以下は私の最初のAPI呼び出しを格納している配列をマップしたものです。私は2番目のAPIコールにpromo.merch_idを戻して、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; 
 
    } 
 
}

私は最初のAPI呼び出しのための約束が解決されるまでので、私のコードにハードに嫌いではありません:)

Answer 1

をあなたは待つことが、その後の応答と第2のAPIを呼び出し、これに新たなんです以前のAPI呼び出し。最後に、このような2番目の呼び出しの約束を返します。相互に依存しているので、ここで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 
    }; 
} 

希望します。ハッピーコーディング！