Tài liệu lập trình front reactjs SLIDE 7

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

R EDUX - FORM

❑Redux-form là thư viện hỗ trợ quản lý react form state

❑Cài đặt

R 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

K ẾT NỐI REDUX - FORM

❑ Import {reducer as formReducer } from ‘redux-form’

T ẠO F ORM

T Ạ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

X Ử LÝ SỰ KIỆN TỰ ĐỘNG

X Ử LÝ SỰ KIỆN SUBMIT

Dùng arrow function

V ALIDATE FORM INPUT

V ALIDATE FORM INPUT

H IỂN THỊ VALIDATION MESSAGES

STREAMS APP

T HIẾT LẬP API SERVER

❑Structure

❖ Streams project

React appServer

T HIẾT LẬP API SERVER

T HIẾT LẬP API SERVER

❑Db.json

T HIẾT LẬP API SERVER

❑Package.json

CÀI ĐẶT API SERVER

A CTION - C REATE

❑Tạo record

❑Tạo record với id

A CTION - G ET

❑Records

❑Record với id

A CTION – EDIT & DELETE

❑Edit

❑Delete

B ROWSER HISTOTY

B ROWSER HISTOTY

S UMARRY

Redux-form

Rest-based app react