[英]Chaining synchronous Redux actions and consuming in component
我有两个需要同步执行的 Redux 操作。 requestStripeToken
在我的组件 (signupComponent.js) 中被调用,但为了获得 Stripe Token,我首先需要调用内部 API 以获取当前的 Stripe Key(因为这会根据环境和 SKU 发生变化)。 这两个函数都在我的操作文件 (actions.js) 中设置为单独的操作。
我有一个问题,我不确定如何在我的组件中使用requestStripeToken
函数。 我不知道我在requestStripeToken
操作中返回的内容是否有问题,或者我的组件中的 Promise 消费逻辑是否需要更改。 注意我使用的是redux-thunk
中间件。
// actions.js
export function requestStripeToken(values) {
return function(dispatch) {
const { cardNumber, cvc, nameOnCard, expiryMonth, expiryYear, billingLine1, billingLine2, billingCity, billingState, billingZip, billingCountry } = values;
// We need to get the Stripe key before we can request a Stripe Token
return dispatch(getStripeSecretKey())
// Curried function necessary as getStripeSecretKey returns the fetch Promise inside of function(dispatch) ?
.then(() => (key) => {
console.log(key);
return new Promise((resolve, reject) => {
Stripe.setPublishableKey(key);
Stripe.card.createToken({
number: cardNumber,
cvc,
name: nameOnCard,
exp_month: expiryMonth,
exp_year: expiryYear,
address_line1: billingLine1,
address_line2: billingLine2,
address_city: billingCity,
address_state: billingState,
address_zip: billingZip,
address_country: billingCountry,
}, (status, response) => {
if (response.error) {
dispatch(addNotification({
message: response.error.message,
level: `error`,
autoDismiss: 0,
}));
reject();
}
return resolve(response.id);
});
});
});
};
}
export function getStripeSecretKey() {
return function(dispatch) {
return fetch(`${getAPIPath}api/stripeKey`, {
method: `GET`,
credentials: `include`,
headers: {
Accept: `application/json`,
},
})
.then(handleErrors)
.then((response) => {
response.json().then((res) => {
return res.data;
});
})
.catch(response => response.json().then((res) => {
dispatch(addNotification({
message: res.message,
level: `error`,
autoDismiss: 0,
}));
throw res;
}));
};
}
这个文件中的console.log(key)
永远不会被调用。
// signupComponent.js
handleCreateAccountSubmit = (values) => {
this.setState({ submitting: true });
// We need the Stripe Token before we can signup the user so needs to be synchronous
this.props.actions.requestStripeToken(values)
.then((stripeToken) => {
console.log(stripeToken);
this.signupUser(values, stripeToken);
})
.catch(() => this.stopSubmission());
}
此文件中的console.log(stripeToken)
返回:
ƒ (key) {
console.log(key);
return new Promise(function (resolve, reject) {
Stripe.setPublishableKey(key);
Stripe.card.createToken({
number: cardNumber,
…
您还需要在 getStripeSecretKey() 中返回 Promises。 Dispatch 返回动作创建者返回的内容,所以如果你这样做:
export function getStripeSecretKey() { return function(dispatch) { return fetch(
${getAPIPath}api/stripeKey , { method:
GET , credentials:
include , headers: { Accept:
application/json , }, }) .then(handleErrors) // also return Promise.reject() in errors .then((response) => { return response.json().then((res) => { // DONT BREAK RETURN CHAIN return Promise.resolve(res.data); // RESOLVE }); }) .catch(response => response.json().then((res) => { dispatch(addNotification({ message: res.message, level:
error , autoDismiss: 0, })); return Promise.reject(res); // REJECT })); }; }
, autoDismiss: 0, })); return Promise.reject(res); // REJECT })); }; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.