Установите Redux State в метод handleSubmit формы Formik React - PullRequest
Новая
       16

Установите Redux State в метод handleSubmit формы Formik React

0 голосов
/ 14 мая 2019

Я хочу установить переменную в хранилище с избыточностью, полученную через Ajax после отправки формы реакции Formik 

import React from 'react';
import {connect} from 'react-redux';
import { withFormik, Form, Field } from 'formik';

const LoginForm = ({
    values
  }) => {

  return (
        <div>
            <Form className={styles.LoginForm}>
              <Field className={input_classes} type="text" name="username" placeholder="username" />
              <Field className={input_classes} type="password" name="password" placeholder="password" />
              <button>Submit</button>
            </Form>
        </div>
    )

}

const mapDispatchToProps = dispatch => {
  return {
    setData: (data) => dispatch({type: actionTypes.ADD_DATA, data: data})
  }
}

const loginForm = connect(null, mapDispatchToProps)(LoginForm);

const FormikLoginForm = withFormik({
  mapPropsToValues({ username, password }) {
    return {
      username: username || '',
      password: password || '',
    }
  },
  handleSubmit(values, props) {
    //make AJAX call and set data in redux store
  }
})(loginForm);

export default FormikLoginForm;

Я не могу найти способ установить какие-либо данные в хранилище в методе handleSubmit;то есть как мне получить доступ к методу setData, который возвращается mapDispatchToProps?

1 Ответ

3 голосов
/ 14 мая 2019

Порядок значения HOC, особенно в этом случае (доступ к подпорке в другом HOC) - избыточный connect должен быть внешним по отношению к withFormik. 

const FormikLoginForm = withFormik({
  mapPropsToValues({ username, password }) {
    return {
      username: username || '',
      password: password || '',
    }
  },
  handleSubmit(values, { props } ) {
    //make AJAX call and set data in redux store
    props.setData( result )
  }
})(LoginForm);

export default connect(null, mapDispatchToProps)(FormikLoginForm);
...