How to make a serial call to React Redux?

Question

React

Good afternoon!
There is a form component and a Button component . This button accepts a parameter where to redirect the person after the click, but the problem is now when I click on the button, I first need to send a request, get a response through promises, and only after a successful response do a redirect.
Questions:

1. How can I pass parameters from the store to my function?
   
2. How in an action that dispatches changes to return a promise so that it understands when to redirect?
   

Page

/* Дополнительная информация для совершения платежа */
import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

import {
  childrenWhiteContentStyle, contentUpStyle, payBtnContainerStyle,
} from '../../styles/GlobalStyle';
import TextFieldLabel from '../forms/TextFieldLabel';
import { choosePayment } from '../routing/Paths';
import Button from '../forms/Button';

const AdditionalPaymentInformation = ({
  fio, onSetFio,
  phone, onSetPhone,
  isBigPayment, onChange,
}) => (
  <div className={childrenWhiteContentStyle}>
    <div className={contentUpStyle}>
      <TextFieldLabel
        type="tel"
        value={phone}
        onChange={onSetPhone}
        label={isBigPayment ? 'Мобильный телефон' : 'Введите номер мобильного телефона'}
        mask="[phone]"
        placeholder="+7"
        helper={isBigPayment ? 'Укажите номер телефона, чтобы перейти к оплате' : 'Специалист службы поддержки свяжется с вами, если возникнут сложности с проведением оплаты'}
      />
    </div>
    <div className={payBtnContainerStyle}>
      <Button
        value="Продолжить"
        to={choosePayment}
        onChange={() => onChange(fio, phone)}
      />
    </div>
  </div>
);

AdditionalPaymentInformation.propTypes = {
  phone: PropTypes.string.isRequired,
  onSetPhone: PropTypes.func.isRequired,
  onChange: PropTypes.func.isRequired,
};

export default connect(
  state => ({
    phone: state.additionalPaymentInformation.phone,
  }),
  dispatch => ({
    onSetPhone: (event) => {
      dispatch({ type: 'SET_ADD_PAY_PHONE', payload: event.target.value });
    },
    onChange: (fio, phone) => {
      console.log(fio, phone);
      // dispatch({ type: 'SET_ADD_PAY_PHONE', payload: '' });
    },
  }),
)(AdditionalPaymentInformation);

button

import React from 'react';
import { withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';

import { payBtnStyle, iconBtnStyle } from '../../styles/GlobalStyle';
import payIcon from '../../img/button/icon-pay.svg';
import disabledPayIcon from '../../img/button/icon-pay-disabled.svg';

const Button = withRouter(({
  history, value, to, icon, disabled,
}) => {
  const redirectTo = () => {
    history.push(to);
  };
  return (
    <button
      type="button"
      className={payBtnStyle}
      onClick={redirectTo}
      disabled={disabled}
    >
      {icon === 'pay' && (
        <img src={disabled ? disabledPayIcon : payIcon} alt="" className={iconBtnStyle} />
      )}
      {value}
    </button>
  );
});

Button.propTypes = {
  value: PropTypes.string.isRequired,
  to: PropTypes.string.isRequired,
  icon: PropTypes.string,
  disabled: PropTypes.bool,
  onChange: PropTypes.func,
};

export default (Button);

Answer 1

We include redux -thunk . We write async action:

function fetchSomeData(params) {
  return async (dispatch, getState) {
    try {
      const { data } = await Api.fetchSomeData(params);
      dispatch(fetchSomeDataSuccess(data));
      // для доступа к store можно использовать getState
      return data;
    } catch (e) {
      dispatch(fetchSomeDataFail(e));
      return e;
    }
  }
}

Connecting to the component:

const mapStateToProps = state => ({ ... });
const mapDispatchToProps = {
  fetchSomeData,
};

export default connect(mapStateToProps, mapDispatchToProps)(SomeComponent);