Übergabe von Daten an einen Aktionsersteller und Rückgabe eines Eigenschaftswerts

Question

Ich möchte Daten von einer API-Anfrage an eine andere weitergeben. Die Eigenschaft, die ich übergeben möchte, ist eine ID, die die erste Eigenschaft meiner API zurückgibt. Mit dieser Eigenschaft möchte ich die ID in den zweiten API-Aufruf injizieren, um ein Objekt spezifisch aufzurufen. Dieser Endpunkt gibt ein ClickUrl zurück. Ich möchte diese URL zurückgeben und sie in eine Link href meiner Ansicht nach einfügen.

Unten ist meine Ansicht, in der ich über ein Array abbilde, das meinen ersten api Anruf unterbringt. Ich möchte promo.merch_id zurück in den zweiten API-Aufruf übergeben und einen Wert von ClickUrl zurückgeben.

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

Meine Aktion Schöpfer

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 
 
    }; 
 
}

Meine Reducer

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; 
 
    } 
 
}

Ich bin neu in dieser so nicht auf meinem Code zu hart hasse :)

Answer 1

Sie, bis das Versprechen für den ersten API-Aufruf wird aufgelöst warten können, rufen Sie dann die zweite API mit der Reaktion von der vorherige API-Aufruf Endlich das Versprechen der zweiten Invokation so zurückgeben. Sie müssen die API-Aufrufe hier nur verketten, da sie voneinander abhängig sind.

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 
    }; 
} 

Hoffe, das hilft. Glückliche Kodierung!