javascript - 链接同步 Redux 操作并在组件中消费

Question

我有两个需要同步执行的 Redux Action 。 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,
…

Answer 1

您还需要在 getStripeSecretKey() 中返回 Promises。 Dispatch 返回 Action 创建者返回的内容，因此如果您这样做:

导出函数 getStripeSecretKey() { 返回函数(调度){ 返回获取(${getAPIPath}api/stripeKey, { 方法:GET, 凭据:包括， 标题:{ 接受:application/json, }, }) .then(handleErrors)//错误时也返回 Promise.reject() .then((响应)=>{ return response.json().then((res) => {//不要破坏返回链 返回 Promise.resolve(res.data);//解决 }); }) .catch(response => response.json().then((res) => { 调度(添加通知({ 消息:res.消息， 级别:错误， 自动关闭:0， })); 返回 Promise.reject(res);//拒绝 })); }; }