@Ramfan

Как сделать так, что бы данные с полей Redux Form попадали в Store только после отправки формы?

У меня есть Redux Form и компонент(Пусть назовем его Registry) , в который через props прокидываются данные с полей, в данном компоненте я произвожу такую вот мутацию
const query = gql`mutation MUatation($email: String!, $password: String!){
  register(email: $email, password: $password, expiresIn: "24h") {
    token
  }
}`;

и получается, что каждый раз, как я ввожу новый символ в поле у меня, обновляется хранилище, а значит обновляются props, и следовательно происходит запрос. Как исправить данное положение?
Компонент, в котором рендерится форма и передаются props
class App extends Component {
    render() {
        return(
        <div>
           <Auth/>
            {(/*this.props.formData.fields.email.visited &&*/  this.props.formData.values.email !== '') &&
            (/*this.props.formData.fields.password.visited && */this.props.formData.values.password !== '')?
                <Main
                    email={this.props.formData.values.email}
                    password={this.props.formData.values.password}
                    onSubmit={this.handleSubmit}
                />: null }

        </div>
        )

    }
}
App.defaultProps = {
    formData: {
        values: {
            email: '',
            password: ''
        }
    }
};

export default connect(state => {
    return{
    formData: state.form.AuthForm
}})(App)


Redux Form:
const renderField = ({ input, label, type, meta: { touched, error, warning }}) => (
  <div>
        <label>{label}</label>
        <div>
            <input {...input} placeholder={label} type={type} style={touched? error? {borderColor: 'red'}: {borderColor:''}: {borderColor:''}} />
        </div>
    </div>
);

const Auth = props => {
    const { handleSubmit, pristine, reset, submitting } = props;

    return (
        <form onSubmit={handleSubmit}>
            <div>
                <div>
                    <Field
                        name="email"
                        component={renderField}
                        type="email"
                        placeholder="Email"

                    />
                </div>
            </div>
            <div>
                <div>
                    <Field
                        name="password"
                        component={renderField}
                        type="password"
                        placeholder="Password"
                    />
                </div>


            </div>


            <div>
                <button type="submit" disabled={pristine || submitting}>
                    Submit
                </button>
                <button type="button" disabled={pristine || submitting} onClick={reset}>
                    Clear Values
                </button>
            </div>
        </form>
    )
}

export default reduxForm({
    form: 'AuthForm',
    initialValues:  {
        password: '',
        email: '',
    },
    validate
})(Auth)
  • Вопрос задан
  • 570 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы