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è 😍😍
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.
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.
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 ạ ?
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
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ỉ ?
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
Đú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é.
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
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
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
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
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à
@@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
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è 😍😍
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
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
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 ạ!
F8 giảng hay hơn học ở trung tâm nữa, chúc F8 luôn gặp may mắn
Giọng với ngữ điệu hướng dẫn hay nhất mình từng nghe.
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.
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á😅
cảm ơn anh, e tính xem chùa mà thấy hay quá phải bình luận
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.
Cảm ơn em nhiều nha
@@F8VNOfficial
9:45 "Viết code nãy giờ không lỗi gì" 😃 Wow
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 ạ ?
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
A ơi hôm nào a làm clip về feature folder structure nha anh ( ͡° ͜ʖ ͡°)
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
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 =))))
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
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?
đ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 ạ
em lại gộp chung anh ạ
Ra rồi, cảm ơn anh
9:28 Tại sao lúc import StoreProvider lại chỉ from ./store mà không phải là ./store/index.js ạ
nó tự nhận nếu trong thư mục có chứa file index
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ỉ ?
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
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 ạ ?
Đú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é.
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
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
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
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
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
thì bạn nói đúng ý của anh Sơn mà
@@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 á
mình cùng câu hỏi luôn
@@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 😂
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à
Hóng a ra redux từng ngày
6 tháng rồi, huhu, :(((. ảnh vẫn chưa ra
perfect quá a ơi
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 ạ?
được nha
Quá hay
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 =))
Thực tế thì cái gì cũng to và phức tạp hơn lúc học 🤣
Hay đó anh
Hay anh ơi❤
Cảm ơn anh Sơn, bài này hay quá ạ (´▽`ʃ♡ƪ)
Thanks em.
Em có để thông tin hợp tác hoặc training ở đâu ko, anh cần liên hệ để trao đổi.
Anh contact giúp em qua contact@fullstack.edu.vn nhé. Cảm ơn anh
làm sao để xin full code ạ
Global State có bị reset default khi f5 trang ko a?
Có nhé bạn
a Sơn dùng font chữ gì đẹp thế nhở🤔
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
anh để em tách ra
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à
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
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
@@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.
@@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.
@@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
@@ThienNguyen-ec7le mình cũng vậy, có những video xem 7-8 lần mới ngâm được
chào ae f8
Please mention the language so that people this is not English.
this channel is for Vietnamese sir
RUclips has subtitles 😢
rối vãi chưởng
Good job