Sử dụng Redux form

Sử dụng Redux form hướng dẫn tạo các form kết nối với đến store trong redux. Nó giúp theo dõi giá trị, định dạng, validate dữ liệu trong form.

Redux-form là thư viện hỗ trợ quản lý react form state. Redux-form giúp xử lý các trạng thái của từng field như: giá trị, formating, validation, các field được tương tác…

Khi đã cài redux-form, Bạn sẽ dùng được các chức năng sau trong ứng dụng của mình:

• Sử dụng hàm formReducer() để cập nhật vào store những giá trị trong form
• Dùng hàm reduxForm() để bọc quanh form component và bind các hàm xử lý tương tác người dùng và dispatch action tương ứng.
• Sử dùng <Field/> trong form component để tạo các form control kết với store

Giả sử có một form có input <Field/>. Khi user nhắp vào input thì 1 Focus action sẽ được dispatch, khi đó formReducer sẽ cập nhật vào state. State được truyền ngược lại đến input component.

Hướng dẫn sử dụng Redux Form cơ bản

Cài đặt redux form

npm i redux react-redux redux-form

Tạo form reducer

Đầu tiên cần tạo form reducer để cập nhật store. Reducer này dùng cho mọi form component trong ứng ddụng của bạn. Code tham khảo để thực hiện như sau (trong index.js)

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

import { createStore, combineReducers } from 'redux'
import { Provider } from "react-redux";
import { reducer as formReducer } from 'redux-form'
const rootReducer = combineReducers({    
    form: formReducer,
    // ...các reducer khác
})
const store = createStore(rootReducer); //Tạo store

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
     <Provider store={store}>
        <App />
     </Provider>
);
console.log("Store: ", store.getState())

Chạy ứng dụng, xem trong console, sẽ thấy thành phần form đã thêm vào store

Tạo form

Giờ thì tạo form kết nối đến store để lưu thông tin. Bạn dùng hàm, reduxForm() để đăng ký với redux-form như ví dụ dưới đây. Hàm sẽ gắn các props liên quan đến state và handle việc submit form.

import React from 'react'
import { Field, reduxForm } from 'redux-form'
let LienHe = () => {
  return (
    <form >
    <p><Field name="hoten" placeholder="Họ tên" component="input" type="text" /></p>
 <p><Field name="email" placeholder="Email" component="input" type="email" /></p>
    </form>
  )
}
LienHe = reduxForm({form: 'lienhe'})(LienHe)
export default LienHe;

Tạo các control trong form với <Field/>

Bạn có thể dùng lệnh <Field/> để tạo các control trong form như input, select, textarea có kết nối sẵn đến store. Nó sẽ tạo các props như value, onChange, onBlur,… giúp theo dõi và cập nhật vào state.

import React from 'react'
import { Field, reduxForm } from 'redux-form'
let LienHe = () => {  
  return (
    <form>
    <p> <label htmlFor="hoten">Họ tên</label><br/>
        <Field name="hoten" component="input" type="text" /></p>
  





  


    <p> <label htmlFor="email">Email</label><br/>
        <Field name="email" component="input" type="email" /></p>
    <p> <label htmlFor="phong">Phòng ban</label><br/>
         <Field name="phong" component="select">
            <option value="">Chọn phòng ban</option>
            <option value="kythuat">Kỹ thuật</option>
            <option value="ketoan">Kế toán</option>
        </Field>
    </p>
    <p> <label htmlFor="noidung">Nội dung</label><br/>
        <Field name="noidung" component="textarea" /></p>
    <p> <Field name="email" component="button">Gửi</Field> </p>
    </form>
  )
}
LienHe = reduxForm({form: 'lienhe'})(LienHe)
export default LienHe;

Xử lý submit form

import React from 'react'
import { Field, reduxForm } from 'redux-form'
let LienHe = () => {
  const handleSubmit  = (e) =>{
    let hoten = e.target[0].value;
    let email = e.target[1].value;
    console.log( hoten, " ", email);
    e.preventDefault();
  }
  return (
    <form onSubmit={handleSubmit}>
    <p> <label htmlFor="hoten">Họ tên</label><br/>
        <Field name="hoten" component="input" type="text" /></p>
    <p> <label htmlFor="email">Email</label><br/>
        <Field name="email" component="input" type="email" /></p>
    <p> <label htmlFor="phong">Phòng ban</label><br/>
         <Field name="phong" component="select">
            <option value="">Chọn phòng ban</option>
            <option value="kythuat">Kỹ thuật</option>
            <option value="ketoan">Kế toán</option>
        </Field>
    </p>
    <p> <label htmlFor="noidung">Nội dung</label><br/>
        <Field name="noidung" component="textarea" /></p>
    <p> <Field name="email" component="button">Gửi</Field> </p>
    </form>
  )
}
LienHe = reduxForm({form: 'lienhe'})(LienHe)
export default LienHe;

Xem thêm tài liệu :  https://redux-form.com/8.3.0/examples