CODEWITHSUNDEEP
reactjsreduxreact-redux
icn
icn

Reputation: 17876

Redux to get form data for onsubmit event

Here is my situation, I have React code in view:

   const {
      email, password, onSubmit, onChangeEmail, onChangePassword
    } = this.props;
    <form>
      <div className="form-group">
        <label >Email address</label>
        <input type="email" onChange={onChangeEmail} className="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email"/>
        <small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
      </div>
      <div className="form-group">
        <label>Password</label>
        <input type="password" className="form-control" id="password" placeholder="Password" onChange={onChangePassword}/>
      </div>
          <button type="submit" className="btn btn-primary" onClick={onSubmit(email, password)}>Submit</button>

    </form>

And I have:

const mapDispatchToProps = (dispatch) => ({
  onChangeEmail: (ev) => dispatch(changeEmail(ev.target.value)),
  onChangePassword: (ev) => dispatch(changePassword(ev.target.value)),
  onSubmit: (email, password) => {
    dispatch(signup(email, password));
  }
});

And actions:

import { SIGNUP, CHANGE_EMAIL, CHANGE_PASSWORD } from './constants';

const signup = (email, password) => ({
  type: SIGNUP,
  email,
  password
});

const changeEmail = (email) => {
  return {
    type: CHANGE_EMAIL,
    email
  };
};

const changePassword = (password) => {
  return {
    type: CHANGE_PASSWORD,
    password
  };
};

export { signup, changeEmail, changePassword };

What is the best way to get email and password for onSubmit action? Should I get the email and password from store state like I have now?

Upvotes: 0

Views: 1308

Answers (2)

Mihail
Mihail

Reputation: 1386

You could store email and password values inside the state of the form component, and store them inside the redux store only one-time after submit.

class LoginForm extends React.Component {
  this.state = { email: '', password: '' };

  handleEmailChange = (event) => this.setState({ email: event.target.value });

  handlePasswordChange = (event) => this.setState({ email: event.target.value });

  handleSubmitButton = () => {
    const { email, password } = this.state;
    const { onSubmit } = this.props;

    onSubmit(email, password);
  };

  render() {
    const {
      email, password, onSubmit, onChangeEmail, onChangePassword,
    } = this.props;

    return (
      <form>
       <div className="form-group">
         <label >Email address</label>
         <input type="email" onChange={handleEmailChange} className="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email"/>
         <small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
       </div>
       <div className="form-group">
         <label>Password</label>
         <input type="password" className="form-control" id="password" placeholder="Password" onChange={handlePasswordChange}/>
       </div>
       <button type="submit" className="btn btn-primary" onClick={onSubmit(email, password)}>Submit</button>
      </form>
    );
  }
}

const mapDispatchToProps = dispatch => ({
  onSubmit: (email, password) => {
    dispatch(signup(email, password));
  },
});

export default connect(mapDispatchToProps)(LoginForm)

Upvotes: 1

Arup Rakshit
Arup Rakshit

Reputation: 118271

As said in the comment, I'll not probably use redux to store my email and password which will be barely needed after signUp/signIn is done. So I'll make a little state full component to save email and password temporarily, and then use that state to prepare the form data while form submitting. Here is what I'd do:

function Form({onSubmit}) {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")

  const handleSubmit = e => {
    e.preventDefault()
    onSubmit(email, password)
  }

  return (
    <form onSubmit={handleSubmit}>
      <div className="form-group">
        <label >Email address</label>
        <input type="email" value={email} onChange={e => setEmail(e.target.value)} className="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email"/>
        <small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
      </div>
      <div className="form-group">
        <label>Password</label>
        <input type="password" className="form-control" id="password" placeholder="Password" value={password} onChange={e => setPassword(e.target.value)}/>
      </div>
      <button type="submit" className="btn btn-primary" onClick={handleSubmit}>Submit</button>
    </form>
  )
}

const mapDispatchToProps = dispatch => ({
  onSubmit: (email, password) => {
    dispatch(signup(email, password));
  }
});

export default connect(mapDispatchToProps)(Form)

Upvotes: 3

Related Questions