私は、ある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呼び出しのための約束が解決されるまでので、私のコードにハードに嫌いではありません:)
問題の解決方法はありましたか?あるいは、それを解決するためにもう少し助けが必要ですか? –