Global State with Context + useReducer | Trạng thái toàn cục

[@F8VNOfficial]

Các bạn có thể tách files constants.js, actions.js, reducer.js sang một thư mục mới tên là state cho nó clear nhé. Thư mục store chứa context và provider là ok rồi nè 😍😍

[@minhhoang576]

bài này mình đã phải luyện tập sử dụng useRducer và useConext rất nhiều thì mới hiểu được hết video này, cảm ơn anh Sơn

[@lttungitbe07072]

Cảm ơn anh Sơn nhiều nhé. Đi làm cũng 1 thời gian rồi nay mới đụng Nextjs nhờ video của anh mà solve được 1 task. Hehe

[@minhtamtrieu4605]

Học kĩ đến hết bài này lúc nhảy sang đọc redux thông não nhanh thật :D Cảm ơn a Sơn nhiều ạ!

[@HungNguyen-pk2hv]

Giọng với ngữ điệu hướng dẫn hay nhất mình từng nghe.

[@zazosystem8887]

F8 giảng hay hơn học ở trung tâm nữa, chúc F8 luôn gặp may mắn

[@quanduong3390]

e cảm ơn "thầy" Sơn rất nhiều. Nếu ko có những videos này chắc còn lâu e mới hiểu được cách React hoạt động < 3. Chúc thầy Sơn nhiều sức khỏe và thành công trong sự nghiệp.

[@DũngVõHoàng-t8h]

cảm ơn anh, e tính xem chùa mà thấy hay quá phải bình luận

[@huuhoangnguyen5900]

9:45 "Viết code nãy giờ không lỗi gì" 😃 Wow

[@lenhac9040]

Bài này cũng dùng context với reducer thôi, cái khó nhất là cấu trúc file, lần đầu chưa quen thấy nó rối quá😅

[@giangvan6190]

mn cho e hỏi là trong file index.js trong thư mục store, s được export default StoreProvider và StoreContext v ạ, e c.ơn

[@blockchain_bull]

Cám ơn anh Sơn, 1 video quá tuyệt vời ạ. e xin bổ xung 1 chút xiu ạ.e nghĩ những video mà có nhiều file như này thì anh có thể tổng hợp lại thành 1 file rồi giải thích theo luồng từ đầu đến cuối thì sẽ dễ hiểu hơn ạ. em cám ơn anh.

[@F8VNOfficial]

Cảm ơn em nhiều nha

[@blockchain_bull]

@@F8VNOfficial

[@TamTran-xm3un]

9:28 Tại sao lúc import StoreProvider lại chỉ from ./store mà không phải là ./store/index.js ạ

[@minhtien213]

nó tự nhận nếu trong thư mục có chứa file index

[@VODIEN_SOUNDS]

Lúc trước em chỉ hay sử dụng useState + useContext để tạo global state. Vậy mình có thể sử dụng đồng thời useState (với các state đơn giản) và useReducer làm global state và truyền nó đi trong prop value của Provider ko ạ ?

[@lordsaurondevoffical363]

sao không dùng redux bạn! redux dễ dùng dễ quản ký các state! context với reducer thì các provider nó chồng chéo nhau, khó quản lý! nếu lỡ tay không bảo lưu state, mà thay thế trực tiếp coi như xong, mất cả ngày chả tim ra đâu. bài này của anh sơn học kỹ sang redux dễ học lắm

[@mietiktok8050]

anh có thể thêm 1 video về phần context + useReducer sử dụng typescript ko ạ? Em đang chưa tích hợp được vào. Thanks

[@hongson4107]

đoạn này nó không render App ra màng hình anh là lỗi đúng k ạ . Ai giúp em với ạ

[@ngthuongnguyen9804]

a ơi, cú pháp khi anh nhấp chuột vào rồi a nhả nội dung copy ra nơi khác là gì anh?

[@igdev6095]

27:28 E test thử context của react thì thấy nó cũng chỉ re-render nếu component nào import useContext của Provider đó thôi mà a nhỉ. Ko biết e hiểu sai ở đâu k 😅 Ví dụ như e có header cũng là children của Provider đó nhưng ko có import useContext của nó thì ko bị re-render, e có console ra thử r :v

[@sonminhpham8118]

thì bạn nói đúng ý của anh Sơn mà

[@igdev6095]

@@sonminhpham8118 A Sơn đang nói tới redux ấy b, còn mình test thì thấy react và redux đều như nhau á

[@ThuongNguyen-km7vg]

mình cùng câu hỏi luôn

[@igdev6095]

@@ThuongNguyen-km7vg Mình thấy chắc a Sơn nhầm á b, chứ re-render nguyên cái app thì chả khác nào useState 😂

[@buidu691]

a sơn nói đúng mà bạn , bản chất của thằng Context sử dụng useState hoặc useReducer để làm dữ liệu trung tâm , nếu dữ liệu thay đổi thì tất nhiên tất cả các component được gói trong Context Global Component sẽ bị re-render mà

[@ngthuongnguyen9804]

Hóng a ra redux từng ngày

[@hoangnguyenbauc9035]

6 tháng rồi, huhu, :(((. ảnh vẫn chưa ra

[@vor120]

Ra rồi, cảm ơn anh

[@baotruong5775]

Hay quá nhưng mà hơi ngộp :3, xem thì hiểu nhưng thực hành chưa biết sao =))))

[@viewvue3744]

anh ơi cho e hỏi useContext nó truyền dữ liệu từ cha sang con chứ không thể từ con ngược lại cha hay đồng cấp (anh / chị) đúng không ạ ?

[@F8VNOfficial]

Đúng rồi em ơi. Nhưng nếu em cần truyền từ con lên cha thì em có thể dùng callback đc truyền từ cha xuống, component con gọi callback và đẩy data lên cha. Hoặc em mang data đó lưu lên global state để truyền từ trên xuống nhé.

[@anhuy9331]

làm sao để xin full code ạ

[@hvhryan2888]

Thanks em. Em có để thông tin hợp tác hoặc training ở đâu ko, anh cần liên hệ để trao đổi.

[@F8VNOfficial]

Anh contact giúp em qua [e-mail] nhé. Cảm ơn anh

[@hoclaptrinhblockchaincungtin]

A ơi hôm nào a làm clip về feature folder structure nha anh ( ͡° ͜ʖ ͡°)

[@Huyhoang-rc1su]

Mọi người ơi, cho mình hởi hàm logger đang return 1 hàm với 2 tham số là prevState và action mà đầu vào hàm này là 1 reducer thì cho mình hỏi sao nó hiểu được prevState và action lúc return hàm nhỉ ?

[@DuyNguyen-xq3rp]

thật ra bạn hãy tưởng tượng logger() là 1 dạng reducer ấy bạn, nó trả về 1 fn thì reducer cũng chính là 1 fn có 2 para là state và action và nó trả về state mới, tóm lại nó chính là reducer không khác gì cả. Mình ngồi nghiệm 1 hồi mới ra. Mục đích mình cũng ko rõ để làm gì, nhưng có vẻ code clean hơn

[@NhanHoang-sh8tg]

anh ơi cho em hỏi khúc const [state, dispatch] = useStore() có cách nào chỉ lấy state hoặc dispatch thôi k ạ? hay mình phải sửa lúc pass value ở provider

[@F8VNOfficial]

Mình cần pass cả 2 xuống để dùng em. Nếu lấy nguyên state thì em viết là [state] thôi, khi nào cần dispatch thì mới lấy thêm

[@NamangMinh1]

em lại gộp chung anh ạ

[@modivation6551]

mình có thắc mắc là khi action nhiều thì swithcase cũng nhiều nên vậy có làm chậm ứng dụng không nhỉ, tại thấy mỗi khi có action lại nhét trung vao 1 cai global

[@thanhduynguyen6253]

lúc đó scale của ứng dụng cx to ra rồi, thì sau đó sẽ chia module cho mỗi component, mình nghĩ sau đó thì mỗi component sẽ có riêng file action, component nào thì inport index cho component đó thôi. Hiện tại đang dùng chỉ ở index, nhưng sau chắc chắn sẽ có thêm nhiều module khác, index cũng chỉ là nơi để import các module kia vào để dùng thôi b

[@KhanhNguyen-hl5ot]

perfect quá a ơi

[@chuongluongcong577]

a Sơn dùng font chữ gì đẹp thế nhở🤔

[@F8VNOfficial]

Macbook font mặc định nó thế em ơi. Anh thấy em dùng font SF mono đẹp đó em ơi, em thử cài đi

[@phamhieu3155]

a ơi, dùng HOC React.memo thì có ngăn chặn được re-render k cần thiết của useContext+useReducer k ạ?

[@buidu691]

được nha

[@vuongqtvn]

Hay anh ơi❤

[@trantrongthien51]

Global State có bị reset default khi f5 trang ko a?

[@otuan8740]

Có nhé bạn

[@DavidJames535]

Hay đó anh

[@r3zagrats]

Cảm ơn anh Sơn, bài này hay quá ạ (´▽`ʃ♡ƪ)

[@NamangMinh1]

anh để em tách ra

[@khangan7937]

Lúc thực chiến useContext mới hiểu tại sao phải chia nhỏ và contruct file như thế này =))

[@F8VNOfficial]

Thực tế thì cái gì cũng to và phức tạp hơn lúc học 🤣

[@ThienNguyen-ec7le]

anh em mới học giống mình code nhớ lưu lại nhé không là export import cứ bị lỗi là rối không biết ở đâu luôn á kkk

[@duong2810]

em cũng mới học, đến bài này hơi nản, kiểu file code nhiều linh tinh cũng import export loạn lên

[@F8VNOfficial]

@@duong2810 cố gắng lên em, vô dự án thật nó còn kinh khủng hơn em nghĩ đấy. Học thôi mà cũng nản thì làm cái gì cũng nản thôi.

[@ThienNguyen-ec7le]

@@duong2810 đúng rồi sao lại nản bạn ơi, cứ bình tĩnh á từ từ bạn sẽ hiểu thôi à, cố lên nào.

[@ThienNguyen-ec7le]

@@duong2810 Cách học của mình á là cứ xem rồi code theo anh Sơn đến khi nào hiểu thì thôi 2 lần kh hiểu thì 3 4 lần nhưng mà hiểu xong rồi mình sẽ tự làm ra những ví dụ khác nữa để hiểu rõ hơn nữa á bạn

[@duong2810]

@@ThienNguyen-ec7le mình cũng vậy, có những video xem 7-8 lần mới ngâm được

[@ivofrancisco357]

Please mention the language so that people this is not English.

[@DuyNguyen-xq3rp]

this channel is for Vietnamese sir

[@vantai0703]

KZbin has subtitles 😢

[@minhthan-cv5ox]

rối vãi chưởng

[@vunguyenhuy3688]

lúc dùng dao mổ trâu mổ gà này dùng bom nguyên tử làm sạch lông gà

[@testnet1029]

chào ae f8

[@petslover4306]

Quá hay

[@B8Official]

Good job