Redux Saga: 02 - Các khái niệm cần biết trong Redux Saga 🔥

Gì mà effect, task rồi block/non-blocking, ... đủ thứ trong redux saga, nó là gì? Hãy cùng mình tìm hiểu trong video này nhé!

Trong video này mình sẽ chia sẻ cho các bạn:
✅ Các khái niệm trong Redux Saga
✅ Giới thiệu một số Middleware API
✅ Giải thích cách hoạt động của redux saga middleware
✅ Chạy demo thử một cái code redux saga đơn giản

———
VIDEO CHAPTERS:
Made by: Khang Nguyễn
Cảm ơn bạn nhiều nhé! ❤️
———
0:00 Bắt đầu
1:15 Các khái niệm trong Redux Saga:
1:38 1. Effect
3:04 2. Task
3:40 3. Blocking/Non-blocking call
4:24 4. Watcher/Worker
5:52 Cách nhận biết blocking và non-blocking
6:42 Giới thiệu 1 số cái trong middleware API
9:03 Saga là cái gì?
15:30 Effect creators
19:14 Tóm tắt lại

🌐 Link tham khảo:

#redux
#redux_saga
#redux_saga_glossary

----
Khoá học ReactJS cho người mới bắt đầu trên Udemy của mình
🎁 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:

[EasyFrontend]

hihi có bạn nào thông suốt đc các khái niệm của Redux Saga sau video này ko mn? 😊

[tanducnguyen]

1:36 Effect - Là 1 object chứa thông tin, để middleware biết phải làm gì.
3:03 Task - Là 1 process background.
3:41 Blocking/Non-blocking call - đợi/ko đợi.
4:23 Watcher/Worker.
5:52 Where to check Blocking/Non-blocking Effect.
7:04 createSagaMiddleware API.
8:57 Saga.
15:29 Effect Creators.
19:12 Saga summary.

[KhangNguyen-kqiw]

0:00 Bắt đầu
1:15 Các khái niệm trong Redux Saga:
1:38 1. Effect
3:04 2. Task
3:40 3. Blocking/Non-blocking call
4:24 4. Watcher/Worker
5:52 Cách nhận biết blocking và non-blocking
6:42 Giới thiệu 1 số cái trong middleware API
9:03 Saga là cái gì?
15:30 Effect creators
19:14 => Tóm tắt lại

[thanhpham]

5:25 ai khởi tạo watcher generator và next() của watcher mà nó gọi được hàm take(ACTION) và next() tiếp để gọi được fork ạ ?

[maicaotri]

video rất hay và dễ hiểu ạ, cám ơn anh Hậu đẹp trai, chúc anh nhiều sức khỏe 😍😎

[TinhNguyen-iizy]

tạo thêm khóa học Redux Saga trên Udemy đi anh ơi với có thêm project thì tuyệt quá. Em mua để dành học từ từ !!!

[maicaotri]

Anh Hậu ơi, anh có thể ra một vài video hoặc series về chủ đề build project, webpack, ... không ạ, cái này có vẻ mang tính lý thuyết và đa dạng quá, em cũng không biết như thế nào, hy vọng anh sẽ dạy về chủ đề này để thông não em và giúp em có thể hiểu và làm tốt hơn khi cần build hoặc setup build project chuẩn mực ạ. 🤗

[tunguyenngoc]

làm xong đọc lại thấy hay ghê luôn <3

[gfshfds]

anh Hậu ơi, em đang có một case như này anh có lời khuyên gì không ạ. Đại loại là như này:
+ em có một saga là setCacheData, thì saga này được gọi khi em thay đổi data trên form, kiểu là chạy ngầm ở dưới ý ạ, cứ thay đổi trên form thì gọi
+ trên form của em thì có một nút submit, do bản chất là khi bấm nút submit thì backend thì sẽ lấy data trên cache mà em đã gọi api set mỗi khi mà change trên form rồi, nên là khi submit em ko cần gửi mấy cái data ấy đi, mà phía BE sẽ tự lấy ở cache.
Em đang gặp vấn đề có những lúc setCache chưa chạy xong, mà user đã bấm submit nên là khi đó BE sẽ lấy data cũ để lưu database do setCache chưa xong nên là data chưa mới nhất.
Anh có advice nào ko ạ? tại hai cái saga này riêng biệt nên là trong saga submit em cũng chả biết cái setCache có đang chạy hay ko?

[maicaotri]

Anh Hậu ơi, theo anh thấy thì macbook pro m1 và macbook 16inch thì cái nào sài để code tốt hơn ạ?

[thanhpham]

mọi người cho tớ hỏi chút : Theo t, việc quyết định ông generator có chạy tiếp hay không thì t nghĩ phụ thuộc vào ông middleware có gọi next() hay không . T có giả thuyết là Trường hợp middleware đọc effect A và biết đây là blocking thì ông ý sẽ KHÔNG gọi next() của generator vội mà xử lý effect A xong xuôi, sau đó mới gọi next(result). Còn trường hợp middleware đọc effect B và biết đây là nonblocking thì middleware sẽ gọi luôn next() của generator đồng thời xử lý effect B (2 việc một lúc ). @Easy Frontend anh ơi em nghĩ vậy đúng không ạ ??

[vuviet]

Hi anh em có 1 vấn đề muốn hỏi là tại sao mình dispatch 1 action mà ko call api ở action hoặc reducer của redux, hoặc là call 1api xong rồi dispatch action vào redux mà lại phải sử dụng thêm middleware ko ạ

[dasdsa]

anh cho em hỏi là 1 effect đang block mà có 1 cái fork khác được gọi thì thế nào ạ

[tritranminh]

anh ơi có thể giải thích sơ về tác dụng của Channel và Buffer được hk anh

[trandinhthang]

Hi anh. Ví dụ có một chức năng get API nhưng cần hai nguồn dữ liệu trả về. Nguồn dữ liệu thứ 2 cần id của nguồn dữ liệu thứ nhất. Thì mình xử lý như nào thì hợp lý ạ. Cách thứ 1 là sau khi yield call ở saga có data rồi yield call lần 2. Hay useEffect truyền vào mảng là giá trị của state data thứ nhất trả về. Có thay đổi thì dispatch action xử lý API thứ 2 ạ

cái chỗ generator nó gặp những effect blocking thì nó đợi trả về kết quả rồi nó chạy tiếp còn non blocking nó chỉ lướt qua không cần trả về kết quả hả anh ?

[n.lemanhhung]

muốn lấy data từ json-sever để làm initialState làm như nào ạ

[duetran]

mỗi ngày 1 video dc ko anh ơi, :(( trùng hợp thay em cũng đang tìm hiểu để làm về thằng này.

[hieunguyen]

khóa này mình dùm redux-toolkit hay redux thuần vậy anh

[hungnguyensycanh]

Anh Hậu cho em xin slide tài liệu được không ạ ?