Цепочка синхронных действий Redux и использование в компоненте

Question

У меня есть два действия Redux, которые должны выполняться синхронно.requestStripeToken вызывается в моем компоненте (signupComponent.js), но для получения токена Stripe мне сначала нужно вызвать внутренний API для получения текущего ключа Stripe (так как это меняется в зависимости от среды и SKU),Обе эти функции настроены как отдельные действия в моем файле действий (actions.js).

У меня проблема в том, что я не уверен, как использовать функцию requestStripeToken в моем компоненте.Я не знаю, связано ли это с тем, что я возвращаю в действии requestStripeToken, или нужно ли изменить логику потребления Promise в моем компоненте.Примечание. Я использую redux-thunk middleware.

// 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

Вам также необходимо возвращать Promises в getStripeSecretKey ().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 })); }; }