Как сделать последовательный вызов React Redux?

Question

[Username]

Добрый день!
Есть компонента с формами и компонента кнопка (Button). Эта кнопка принимает параметр куда нужно редиректить человека после клика, но вот проблема теперь при клике на кнопку мне нужно сначала отправить запрос, через промисы получить ответ и только после успешного ответа делать редирект.
Вопросы:

1. Как моей функции передать параметры из хранилища?
   
2. Как в экшену, который диспатчит изменения вернуть промис для того чтобы он понимал когда редиректить?
   

Страница

/* Дополнительная информация для совершения платежа */
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

[Антон Спирин]

Подключаем redux-thunk. Пишем 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;
    }
  }
}

Подключаем к компоненту:

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

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

Comments

[Username]

Последовательность действий какая?
На странице я диспатчу экшен fetchSomeData, он вызывается отправляет данные, всё окей.
Но как мне сообщить Button что запрос успешный и ты можешь сделать редирект?

[Антон Спирин]

Username, тут много вариантов. Самое главное: сообщать Button ничего не надо. Кнопке передается только событие onClick.
Самый простой вариант:

onClick = () => {
  this.props.fetchSomeData(this.state.someParam).then(res => {
    // do something
  });
}

Другой вариант, обрабатывать success и fail в редьюсере и передавать в компонент соответствующие ключи.

[Антон Спирин]

Username, еще возвращайте стилизованный Link если передается ссылка, тег a с target="_blank" если внешняя ссылка и button если ссылка не передается. Это будет лучшим вариантом. Для определения внешней ссылки придется использовать хелпер.
Так у вас будет универсальный компонент.

Вот реализация кнопки из текущего проекта, над которым работаю:

function Button({ type, className, to, href, onClick, children, disabled, color, size = 'md', ...props }: Props) {
  const url = to || href;
  const isExternal = url && (url.indexOf('://') !== -1 || url.indexOf('//') === 0);

  let styledFunction;
  let buttonProps = {};

  if (url) {
    styledFunction = isExternal ? styled.a : styled(Link);
    buttonProps = isExternal ? {
      href: url,
      target: '_blank',
      rel: 'nofollow',
    } : {
      to: url,
    };
  } else {
    styledFunction = styled.button;
  }

  const Component = getComponent(styledFunction);

  return (
    <Component
      type={type}
      colors={getButtonColors(color)}
      size={size}
      className={className}
      disabled={disabled}
      onClick={onClick}
      {...buttonProps}
      {...props}
    >
      {children}
    </Component>
  );
}

Тут без хелпера, поэтому ссылка с полным путем и вашим доменом будет восприниматься как внешняя.
Еще используется styled components, но это никаких особенностей не вносит, без styled реализация не сильно будет отличаться.

[Username]

Антон Спирин, не могу понять почему такое значение возвращает