Redux Saga: 26 - Làm giao diện cho Statistic Item với Material UI

Lấy dữ liệu statistics và bind lên giao diện trang dashboard ❤️
Sử dụng Material UI - Paper để xây dựng UI cho các statistics item.
Sử dụng Material UI - Grid để làm layout chính.
#reactjs
#redux_saga
#material_ui
----
Trở thành FAN CỨNG để hưởng được nhiều quyền lợi ưu tiên:
www.youtube.co...
----
Khoá học ReactJS cho người mới bắt đầu trên Udemy của mình
🌐 Link khuyến mãi: course.ezfronte...
🎁 Giá ưu đãi được đính kèm trong link 😉
-----
💻 Easy Frontend 🎉
Nơi kiến thức lập trình web frontend (html/css/javascript/reactjs) được chia sẻ một cách đơn giản, dễ hiểu mà đặc biệt là vui 😊 Với những tài liệu (tutorial) được biên soạn một cách kĩ lưỡng để giúp các bạn developer mới có thể nắm bắt vấn đề một cách nhanh chóng và hiệu quả. Từ đó nâng dần khả năng coding của các bạn lên theo thời gian.
❤️ Ủng hộ mình làm videos thì đóng góp qua MoMo/ZaloPay: 0901 309 729 nhé!
Kết nối với mình:
Follow FB cá nhân: / nvhauesmn
🎉 Fan page: / learn.easyfrontend
❓Group: / easyfrontend
💻Github: github.com/pau...
💼 LinkedIn: / haunguyenmn

[@HoangNguyen-zv3xb]

anh ơi anh dùng cái type gì để nó hiển thị dấu >= đấy anh

[@EasyFrontend]

à nó là font firacode nha Hoàng ơi, em search firacode vscode rồi em theo hướng dẫn nhen hehe

[@HoangNguyen-zv3xb]

@@EasyFrontend thanks anh. Em học series này của anh mở mang quá trời lun. Tại dự án em mới loading cần có saga và toolkit, học của anh đúng bài lun kk. Nhưng phải ngồi config lại mới chạy đc mấy phần đó :D

[@maicaotri3668]

anh Hậu có thể làm một 1-2 video về cách viết material UI không ạ?

[@EasyFrontend]

Em có thể nói cụ thể hơn hk Trí? Ý em là viết cái gì của MUI em hen?

[@maicaotri3668]

@@EasyFrontend viết makeStyles đó anh với dùng biến như là theme.spacing gì đó ạ

[@EasyFrontend]

@@maicaotri3668 à cái đó em chỉ cần xem cái theme object có props gì là xong, trên material ui nó có á Trí hehe 😉

[@c63coding]

Hi anh, em làm khúc loading nó vẫn bị layout nhảy 1 chút khi loading xuất hiện và mất đi @@, chỉnh hoài ko được anh ơi. Sau một hồi mò thì mình làm vậy: {loading && }

[@EasyFrontend]

hi Huy, anh hk hình dung đc issue của em là gì nên hk biết gợi ý sao hết nè hic

[@duyk30b]

14:11 a ơi, cho e hỏi chút, e thấy 1 vài framework kiểu như Ant Design Pro họ có 1 dòng Toast: "server disable", sau đấy, khi server chạy được thì lại bắt đầu load dữ liệu như mình làm, hoặc là đang sử dụng frontend như bình thường mà server đột ngột chết ấy, nó cũng hiện "server disable". Vậy logic đoạn phát hiện "server disbale" là như nào anh nhỉ

[@EasyFrontend]

hi Duy, cái này anh cũng hk rõ bên AntD làm thế nào em nha. Có thể là lâu lâu ping check thử em nha, còn cụ thể thì a hk rõ nữa hihi

[@duyk30b]

@@EasyFrontend ok, tk anh, e tự lần mò thêm xem sao :D serial này của a hay thật :3

[@phanhaiang7052]

khi chuyển route -> component dasboard được rerender -> action sẽ được dispatch -> sẽ gọi lấy lại dữ liệu, và như anh nói thì dữ liệu nếu không thay đổi với hiện tại thì sẽ k được update, và phần dữ liệu sẽ không được rerender đúng không ạ, vậy nếu khi chuyển route và gọi api trực tiếp trong component và dữ liệu k được lưu trên redux, và thế là phần hiển thị dữ liệu phải render lại đúng không ạ. 🤣🤣🤣🤣 Mong được anh khai sáng và cảm ơn a nhiều ạ

[@EasyFrontend]

hi Đăng, nó thế này em nha: 1. Khi gọi API trên component, lúc em quay lại rõ ràng là dữ liệu đã mất, ko còn dữ liệu hùi nảy nữa. Nên em phải gọi lại API và render lên nè. 2. Còn trường hợp của mình do dữ liệu lưu trên redux, nên khi quay lại nó show cái dữ liệu cũ hùi nảy trước. Xong mình có gọi API bên dưới để gọi API, sau khi có KQ thì nó cập nhật lên redux em nha, và nếu có state nào thay đổi thì nó sẽ trigger re-render component tương ứng hehe

[@phanhaiang7052]

@@EasyFrontend dạ vậy khi gọi API thì ta nhận được dữ liệu, và dữ liệu đó giống với dữ liệu cũ thì state chứa dữ liệu đó trên redux có cập nhật lại không ạ, làm phiền anh quá 😭😭😭

[@EasyFrontend]

@@phanhaiang7052 à tuỳ dữ liệu em nha, primitive thì giá trị ko đổi nó sẽ ko re-render, nhưng với tham chiếu thì nó luôn có tham chiếu mới nên sẽ trigger re-render trừ khi em định nghĩa lại cách nó compare state, nhưng do dữ liệu ko đổi nên trên giao diện em sẽ hk thấy thay đổi gì nha 🙂

[@phanhaiang7052]

@@EasyFrontend tr ơi cảm ơn a nhiều nhen 🤣🤣🤣