Last active
January 3, 2018 19:52
-
-
Save ZwaarContrast/1a8510954d6c0f602e283cce01e3fd1d to your computer and use it in GitHub Desktop.
Sign in Component using updated redux-form.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { Component } from 'react'; | |
| import {Field,reduxForm} from 'redux-form'; | |
| import {connect} from 'react-redux'; | |
| import * as actions from '../../actions'; | |
| class Signin extends Component { | |
| handleSignin({ email, password }){ | |
| // Log values | |
| console.log('Email', email); | |
| console.log('Password', password); | |
| // Call action creator | |
| this.props.signInUser({email:email,password:password}) | |
| }; | |
| render(){ | |
| // Get handleSubmit of the props, supplied by redux-form | |
| const { handleSubmit } = this.props | |
| return ( | |
| <form onSubmit={ handleSubmit(this.handleSignin.bind(this))}> | |
| <h3>Sign in</h3> | |
| <Field component={renderField} type="text" name="email" label="Email"/> | |
| <Field component={renderField} type="password" name="password" label="Password"/> | |
| <button type="submit" className="btn btn-primary">Sign in</button> | |
| </form> | |
| ) | |
| } | |
| } | |
| const validate = values => { | |
| const errors = {} | |
| //Check email value for empty | |
| if (!values.email) { | |
| errors.email = 'Email is required' | |
| } | |
| //Check password value for empty | |
| if (!values.password) { | |
| errors.password = 'Password is required' | |
| } | |
| return errors | |
| } | |
| const renderField = ({ input, label, type, meta: { touched, error , invalid} }) => { | |
| //Construct form-group class depending on form state | |
| const groupClass = touched ? (invalid ? 'form-group has-danger':'form-group has-success') : 'form-group'; | |
| //Construct form-control class depending on form state | |
| const inputClass = touched ? (invalid ? 'form-control form-control-danger':'form-control form-control-success') : 'form-control'; | |
| return ( | |
| <div className={groupClass}> | |
| <label>{label}</label> | |
| <input {...input} placeholder={label} type={type} className={inputClass} /> | |
| <div className="form-control-feedback"> | |
| {touched ? <span>{error}</span> : ''} | |
| </div> | |
| </div> | |
| ) | |
| } | |
| //Hookup redux form | |
| Signin = reduxForm({ | |
| form:'signin', | |
| validate | |
| })(Signin); | |
| //Use connect from react-redux to gain access to actions | |
| Signin = connect(null, actions)(Signin); | |
| export default Signin; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This gist was so helpful - Thank You.
I'd arrived at almost all of it on my own, but was not finding help anywhere with this last bit that was stumping me:
From the gist, v6 code:
handleSignin( { email, password } ){ ... // << YESMy blind spot was: What parameters to pass to that helper method was not clear to me, as I worked through understanding how to "migrate" from the course's ReduxForm v5 to the latest v6.
From looking over the course (v5) code, it looked like ReduxForm was going to take care of, for me, behind the scenes, the grouping of form fields into this object, formProps:
From course, v5 code:
handleSignin( formProps ){ ... // << NO (not if you're using v6)(actually, the method there is called
handleFormSubmit- but, same idea)And from looking at the v6 migration online documentation I was not finding an example that used a helper method as we do in signin.js, signup.js (for our client-side validation, then our async server-side call).
So I was a little lost, not realizing what the heck you need to do with your form fields, if you need to sling them around, pass them to a function like this.
And this was especially confusing (or at least non-intuitive to me) in that ReduxForm v6 is happy to let you pass an object that collects together your form fields to the validate() function.
Both v5 and v6:
validate( formProps ){ ... // << OH YEAH, NO PROBLEM, PASS ME A NICE OBJECT OF ALL THOSE FORM FIELDSSo once again, MANY THANKS for a working example gist that showed me the bit I needed to complete this:
handleSignin ( { email, password } ) { ... // << I GUESS IF YOU WRITE YOUR OWN METHOD, YOU GOT TO PASS THOSE FORM FIELDS IN BY NAME INDIVIDUALLYCheers. Thanks.
William R.
Hope you don't mind a link to the Udemy course Q&A where this was discussed ... (password-protected resource)
https://www.udemy.com/react-redux-tutorial/learn/v4/questions/1644420