Redux Saga: 45 - Xử lý submit form có loading và error

[@NguyenPhung-203]

Hi anh, mong anh mở khoá js trên udemy business để em trên công ty học kiến thức của anh ạ

[@EasyFrontend]

yay cảm ơn em nhiều nè, cơ mà anh hk có quyền mở trên business á em hihi, cái đó bên udemy họ quyết định nè

[@phamquan6570]

Anh ơi cho e hỏi chút ở phần Add Edit này tại sao mình ko dipatch action sang saga mà lại gọi trực tiếp API vậy

[@EasyFrontend]

hi em, cá nhân anh thì tiếp cận theo hướng khi nào có cần thay đổi state trên redux anh mới dispatch action còn mấy action add / edit / delete nó ko có trực tiếp tác động lên state nào trên redux cả, nên anh khuyến khích gọi API dưới component cho nó đơn giản em nha. Sau khi thực hiện xong API, em có thể dispatch action đi fetch lại list nếu cần 😊

[@nguyentrongnhan8138]

Anh cho em hỏi 1 xíu, trong form mình submit để update student, mình gửi lên có 2 fields là createdAt và updatedAt, 2 field này thì nó không cần để submit lên server. Vậy làm sao để remove 2 field đó đi anh?

[@EasyFrontend]

hi Nhân, em xử lý trong hàm submit nhen, em remove 2 fields đó ra trước khi gọi API là đc hehe

[@nguyentrongnhan8138]

@@EasyFrontend Dạ em cảm ơn anh nhưng ý em không phải vậy Ý em là nếu xử lý thì vẫn xử lý được, với trường hợp hiện tại thì mình chỉ có vài field thì không nói. Nhưng nếu mình đang có 1 cái model mà có khoảng mười mấy thuộc tính, và khi call API thì mình chỉ cần vài cái thuộc tính của model thôi, mà mình lại submit luôn cả 1 cái model sau đó lại phải đi xử lý, chỉ lây lại những field cần thì nó mất công á anh. Có cách nào mình prevent được nó ngay từ dầu không anh. Với anh cho em hỏi luôn là mặc dù là mình clone trực tiếp initial value từ student nhưng trong form mình không hề có những Field để handle những giá trị đó (studentId, createdAt, updatedAt), vậy tại sao khi form submit nó lại có nhưng field đó. Vậy là mình đang submit form hay submit cả cái object student anh. Em hỏi hơi nhiều, anh thông cảm nghen hehe

[@EasyFrontend]

lol dài vãi, lần sau em nên break câu ra cho dễ đọc nha Nhân 🤣 1. Dù gì đi nữa, trước khi gọi API, nhiệm vụ của em là chuẩn bị payload, nếu formValues ko phù hợp thì em phải làm cái bước xử lý để biến formValues thành payload em mong muốn hen. Đó là bắt buộc và cũng ko có gì là tốn công cả. 2. Không xử lý ngay từ đầu, vì dữ liệu đầu vào cho form chưa chắc đc dùng để gọi API, nên em có xử lý ban đầu, thì lúc submit cũng phải xử lý lại. 3. Tại sao có những fields ko có trong form mà lúc submit lại có, cái này lúc anh dùng v6 và dùng reactjs javascript thì nó ko có thiệt. Mà tới RHF v7 thì có luôn, cái này em kiểm tra lại giúp anh hen. 4. Việc hỏi nhiều là đc khuyến khích em nha, cứ tiếp tục hen hehe Nhớ lưu ý, tách câu ra, đừng để một đoạn văn nhìn hú hồn 🤣

[@nguyentrongnhan8138]

@@EasyFrontend Dạ em cảm ơn anh, sorry anh để em break câu hỏi cho anh dễ đọc , nhưng có 1 số cái em vẫn chưa clear lắm :)). 1. Chuẩn bị payload để gọi API như là validation, hay convert lại dữ liệu để submit thì ok cái này là bắt buộc không có gì để nói. Nhưng ở đây mình đang phải làm là lọc lại những field dư thừa. Trong trường hợp form hoặc model đơn giản thì không vấn đề mình có thể làm nhanh và đơn giản . Nhưng nếu 1 cái form phức tạp nó cần 2,3 model mixed lại với nhau để lấy dữ liệu và submit nó lại là vấn đề khác. 2. Xử lý ban đầu em nói ở đây không về vấn đề valid input của user, mà về vấn đề là form phải xử lý cho mình về những input mình khai báo cho nó. Cái form value nó chỉ được trả đúng nhưng gì mình đưa, không dư không thiếu. Còn chuyện khi submit mình add thêm field hay convert lại dữ liệu thì không có gì để nói. Nhưng ở đây mình đang phải làm 1 chuyện mà đáng lẽ form nó phải làm cho mình. 3. Đúng như anh nói thì RHF mấy version trước em sử dụng thì không thấy bị vấn đề này, em nghĩ vấn đề là mình đang pass toàn bộ cái object student vào initial value . Cái này chắc em check lại cho chắc. 4. Anh cho em hỏi thêm cái nghen. Là đa phần em làm sẽ style bằng scss. Nhưng material UI thì lại recommend là sử dụng cách style của họ. Trong trường hợp UI phức tạp thì nếu mình mixed giữa 2 cái như vậy thì CssBaseLine nó có bị ảnh hưởng không anh. Với cho em feedback 1 xíu là khóa học này em thấy anh dạy hay, khá là chất lượng. Em đang tìm cách để tổ chức folder với file cho dự án để dễ quản lý thì gặp khóa học này của anh luôn. Cảm ơn anh nhiều nghen :))

[@EasyFrontend]

haha vậy là câu hỏi của em xoay quanh việc form lúc submit nó đưa dữ liệu của cả những fields chưa ko có register =)) Em check lại giúp anh chỗ này hen. Còn về vụ styles, follow một cái thôi em, MUI nó sử dụng CSS-in-JS, mình làm theo dạng này luôn nha. Đừng vừa dùng scss vừa kiểu MUI, nó ko có vấn đề gì cả, chỉ là mệt cho mình viết đủ kiểu thôi =)) Cảm ơn em về phản hồi khoá học nhen hehe, nó là cấu trúc anh dùng trong dự án thực tế luôn á, nên em thoải mái apply cho dự án của em nha 😉

[@TheSweetlove191]

Ở Login page, em tách theo React-Hook-Form mà gọi dispatch nếu điền đúng thì sẽ login, còn điền sai thì nó đứng nguyên tại chỗ anh nhỉ?

[@EasyFrontend]

yeah đúng òi em nha 😉 đứng tại login và show error tương ứng nữa nha hehe

[@TheSweetlove191]

@@EasyFrontend em đến bước đó rồi, mà khi điền đúng lại, thì nó vẫn đứng nguyên, thành ra chưa hiểu lắm

[@EasyFrontend]

à em check lại authSaga, khúc watchLoginFlow, chỗ take action logout, hiện anh chỉ watch loginSuccess, em check chỗ đó, và bổ sung thêm loginFailed nữa nha. Tức dù loginSuccess hay loginFailed thì mình đều logout và quay lại watch login nha Hà 😉

[@PhuTran-ud8vi]

Cái chỗ API cho update và get list student như có vấn đề anh ơi. Trong list student nó có 1 key là data. mỗi khi update là chỉ update trong cái key data đó thôi. Còn get list student thì nó hiển thị các params bên ngoài như: id, name, age, city, pla pla....

[@EasyFrontend]

hi Phú, cái đó chắc có bạn submit dữ liệu bị sai á em, nên nó lưu luôn. Tí nữa ko có ai sử dụng , server restart thì dữ liệu sẽ trở về đúng em nhen 😉

[@PhuTran-ud8vi]

@@EasyFrontend Dạ okie anh, em đợi server restart rồi test lại :D Thanks anh

[@EasyFrontend]

@@PhuTran-ud8vi hehe okie em nha, hoặc em test trên mấy object mà ko bị ảnh hưởng á em nhen hihi, may là có reset data hk thôi bảo trì server bệnh luôn haha

[@PhuTran-ud8vi]

@@EasyFrontend okie anh, để em đi dạo xung quanh các object khác 😆

[@minhtainguyen9283]

dính cors api patch rồi a ơi

[@EasyFrontend]

ủa cors enabled hết rồi mà em hen, em kiểm tra lại nha Tài 😉 Nếu vẫn bị thì post lên nhóm facebook trao đổi easy frontend nha Tài 🙂

[@minhtainguyen9283]

@@EasyFrontend à dc rồi a, do cái plugin của e :D