Bắt đầu với Reactjs- Phần 5, Tìm hiểu về redux-form

• Redux form là 1 Higher-Order Components làm việc với React Redux để lưu trữ state của react form vào store của redux.
• Redux cung cấp cho chúng ta 1 chuỗi các event dựa trên các thay đổi của react form để handle các thay đổi 1 cách dễ dàng.

2.1. Cài đặt i18next

• npm package

     npm i redux --save
     npm i react-redux --save

2.2 Sử dụng

Đầu tiên ta tạo một component, tạo một form như sau register/RegisterForm.jsx

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import validateInput from './validate';
import { buttons } from 'bootstrap-css'

const renderField = ({ input, label, type, meta: { touched, error } }) => (
  <div className="form-group">
    <label>{label}</label>
    <div>
      <input {...input} placeholder={label} type={type} />
    </div>
    {touched && error && <span className="text-danger">{error}</span>}
  </div>
);

const SubmitValidationForm = props => {
  const { error, handleSubmit, pristine, reset, submitting } = props;
  return (
    <form className="form-horizontal" onSubmit={handleSubmit}>
      <Field
        name="firstName"
        type="text"
        component={renderField}
        label="first name"
      />
      <Field
        name="lastName"
        type="text"
        component={renderField}
        label="last name"
      />
       <Field
        name="email"
        type="text"
        component={renderField}
        label="email"
      />
      <Field
        name="password"
        type="password"
        component={renderField}
        label="Password"
      />
      {error && <strong>{error}</strong>}
      <div>
        <button type="submit" disabled={submitting}>register</button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
      </div>
    </form>
  );
};

export default reduxForm({
  form: 'submitValidation', // a unique identifier for this form
  validate: validateInput,
})(SubmitValidationForm);
import React from 'react';
import { Field, reduxForm } from 'redux-form';
import validateInput from './validate';
import { buttons } from 'bootstrap-css'

const renderField = ({ input, label, type, meta: { touched, error } }) => (
  <div className="form-group">
    <label>{label}</label>
    <div>
      <input {...input} placeholder={label} type={type} />
    </div>
    {touched && error && <span className="text-danger">{error}</span>}
  </div>
);

const SubmitValidationForm = props => {
  const { error, handleSubmit, pristine, reset, submitting } = props;
  return (
    <form className="form-horizontal" onSubmit={handleSubmit}>
      <Field
        name="firstName"
        type="text"
        component={renderField}
        label="first name"
      />
      <Field
        name="lastName"
        type="text"
        component={renderField}
        label="last name"
      />
       <Field
        name="email"
        type="text"
        component={renderField}
        label="email"
      />
      <Field
        name="password"
        type="password"
        component={renderField}
        label="Password"
      />
      {error && <strong>{error}</strong>}
      <div>
        <button type="submit" disabled={submitting}>register</button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
      </div>
    </form>
  );
};

export default reduxForm({
  form: 'submitValidation', // a unique identifier for this form
  validate: validateInput,
})(SubmitValidationForm);

Ở đẩy mình sử dụng thêm package "bootstrap-css"

npm install bootstrap-css@4.0.0-alpha.5 --save

Tạo thêm 1 file để handle validate theo ý của mình register/validate.js

import isEmpty from 'lodash/isEmpty';

 const regexEmail = /^(([^<>()[].,;:s@"]+(.[^<>()[].,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;

const validateInput = (values) => {
  const errors = {};
  if(isEmpty(values.firstName)) {
    errors.firstName = { _error: 'Required' };
  }
  if(isEmpty(values.lastName)) {
    errors.lastName = { _error: 'Required' };
  }
  if(isEmpty(values.email)) {
    errors.email = { _error: 'Required' };
  } else if(!regexEmail.test(values.email)){
    errors.email = { _error: 'Email invalid' };
  }
  if(isEmpty(values.password)) {
      errors.password = { _error: 'Required' };
  }
  return errors;
};

export default validateInput;

Trên đây là mình validate basic, các bạn có thể validation theo từng spec cụ thể. tiếp theo là mình tạo 1 container chứa form, và xử lý data khi pass validate

register/index.jsx

import React, { Component } from 'react';

import RegisterForm from './RegisterForm';

class register extends Component {

  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(values) {
    // handle data after pass validate
  }

  render() {
    return (
      <RegisterForm
        onSubmit={this.handleSubmit}
      />
    );
  }
}

export default register;

Chúng ta sẽ render tạm trong file App.js để thấy được kết quả

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Cart from './components/cart';
import Register from './register';
class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <div className="App-intro">
          <h1> Form register </h1>
        </div>
        <Register />
      </div>

    );
  }
}

export default App;