R
R
Ramfan2018-08-25 22:06:43
React
Ramfan, 2018-08-25 22:06:43

How to make it so that the data from the Redux Form fields gets into the Store only after the form is submitted?

I have a Redux Form and a component (Let's call it Registry) , into which data from the fields is passed through props, in this component I make such a mutation

const query = gql`mutation MUatation($email: String!, $password: String!){
  register(email: $email, password: $password, expiresIn: "24h") {
    token
  }
}`;

and it turns out that every time I enter a new character in my field, the storage is updated, which means props are updated, and therefore a request occurs. How to fix this situation?
The component in which the form is rendered and props are passed
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)

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question