Reduxform là thư viện hỗ trợ quản lý react form state ❑Cài đặt formReducer: function chịu trách nhiệm cập nhật redux store dựa trên những thay đổi từ app formReducer: function chịu trách nhiệm cập nhật redux store dựa trên những thay đổi từ app
Trang 1Conceive Design Implement Operate
THỰC HỌC – THỰC NGHIỆP
http://www.poly.edu.vn
Trang 2M ỤC TIÊU
Redux-form
Rest-based app react
Trang 4R EDUX - FORM
❑Redux-form là thư viện hỗ trợ quản lý react form state
❑Cài đặt
Trang 5R EDUX FORM
formReducer: function chịu trách nhiệm cập nhật
redux store dựa trên những thay đổi từ app
Trang 6K ẾT NỐI REDUX - FORM
❑ Import {reducer as formReducer } from ‘redux-form’
Trang 7T ẠO F ORM
Trang 8T ẠO FORM
❑Component <Field />
<Field name="inputName"
component="input" type="text" />
- Kết nối input đến store
- Tạo phần tử HTML <input /> với type text
- Truyền vào props: value, onChange,
- Các loại input khác trong <Field />:
https://redux-form.com/7.3.0/docs/api/field.md/#usage
Trang 9X Ử LÝ SỰ KIỆN TỰ ĐỘNG
Trang 10X Ử LÝ SỰ KIỆN SUBMIT
Dùng arrow function
Trang 11V ALIDATE FORM INPUT
Trang 12V ALIDATE FORM INPUT
Trang 13H IỂN THỊ VALIDATION MESSAGES
Trang 14STREAMS APP
Trang 16T HIẾT LẬP API SERVER
❑Structure
❖ Streams project
React appServer
Trang 17T HIẾT LẬP API SERVER
Trang 18T HIẾT LẬP API SERVER
❑Db.json
Trang 19T HIẾT LẬP API SERVER
❑Package.json
Trang 20CÀI ĐẶT API SERVER
Trang 22A CTION - C REATE
❑Tạo record
❑Tạo record với id
Trang 23A CTION - G ET
❑Records
❑Record với id
Trang 24A CTION – EDIT & DELETE
❑Edit
❑Delete
Trang 25B ROWSER HISTOTY
Trang 27B ROWSER HISTOTY
Trang 29S UMARRY
Redux-form
Rest-based app react