Question

我有两个Redux动作需要同步执行。 requestStripeToken在我的组件（signupComponent.js）中被调用，但是为了获得Stripe令牌，我首先需要调用一个内部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,
…

Answer 1

您还需要在getStripeSecretKey（）中返回Promises。调度返回操作创建者返回的内容，因此，如果这样做：

export function getStripeSecretKey() { return function(dispatch) { return fetch( $ {getAPIPath} api / stripeKey , { method:获取, credentials:包括, headers: { Accept:应用程序/ 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:错误, autoDismiss: 0, })); return Promise.reject(res); // REJECT })); }; }

链接同步Redux操作并在组件中使用

1 个答案: