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
Conceive Design Implement Operate THỰC HỌC – THỰC NGHIỆP http://www.poly.edu.vn MỤC TIÊU Redux-form Rest-based app react REDUX-FORM ❑Redux-form thư viện hỗ trợ quản lý react form state ❑Cài đặt REDUX FORM formReducer: function chịu trách nhiệm cập nhật redux store dựa thay đổi từ app KẾT NỐI REDUX-FORM ❑ Import {reducer as formReducer } from ‘redux-form’ TẠO FORM TẠO FORM ❑Component - Kết nối input đến store - Tạo phần tử HTML với type text - Truyền vào props: value, onChange, onBlur,….giúp theo dõi cập nhật state - Các loại input khác : https://reduxform.com/7.3.0/docs/api/field.md/#usage XỬ LÝ SỰ KIỆN TỰ ĐỘNG XỬ LÝ SỰ KIỆN SUBMIT Dùng arrow function THIẾT LẬP API SERVER ❑Structure ❖Streams project Server React app THIẾT LẬP API SERVER THIẾT LẬP API SERVER ❑Db.json THIẾT LẬP API SERVER ❑Package.json CÀI ĐẶT API SERVER ❖React app ❖Server ACTION - CREATE ❑Tạo record ❑Tạo record với id ACTION - GET ❑Records ❑Record với id ACTION – EDIT & DELETE ❑Edit ❑Delete BROWSER HISTOTY BROWSER HISTORY ❑Tham khảo: https://reactrouter.com/web/api/history ❑History object có thuộc tính phương thức quan trọng sau ❖Location ❖Push() ❖Replace() ❖Go() ❖goBac() BROWSER HISTOTY SUMARRY Redux-form Rest-based app react ... onChange, onBlur,….giúp theo dõi cập nhật state - Các loại input khác : https://reduxform.com /7. 3.0/docs/api/field.md/#usage XỬ LÝ SỰ KIỆN TỰ ĐỘNG XỬ LÝ SỰ KIỆN SUBMIT Dùng arrow function VALIDATE