Redux-Saga vs Redux-Thunk

So sánh redux-thunk với redux-saga

- Điểm giống và khác nhau

- Khi nào sử dụng redux-saga để hiệu quả cho dự án

- Ưu điểm vượt trội của redux-saga là gì

Giống nhau gì ?

1. Middleware Một ứng dụng thực tế thường đòi hỏi có những thao tác xử lý cần thời gian để phản hồi ( các thao tác bất đồng bộ lấy dữ liệu từ api hay các thao tác đọc ghi file hay đọc cookie từ trình duyệt, …)

2. Redux (đòi hỏi gì)

Thứ nhất: Các xử lý trong Reducers phải là các hàm đồng bộ và pure, trả về state mới

Thứ hai: Reducers sẽ ko được sử dụng các hàm async vì không được thay đổi global state.

Trong Redux, middleware là một lớp nằm giữa Reducers và Dispatch Action, nó sẽ modify và được gọi trước khi action được dispatch.

Vậy redux-thunk và redux-saga sinh ra để thực hiện động tác middleware

* Side effect là gì??

- Tất cả những xử lý ở REDUCER đều phải là synchronous và pure tức chỉ là xử lý đồng bộ

- Nhưng trong ứng dụng thực tế thì cần nhiều hơn vậy ví dụ như asynchronous (thực hiện một số việc như gọi một hàm AJAX để fetch dữ liệu về nhưng cần đợi kết quả chứ kết quả không trả về ngay được) hoặc là impure (thực hiện lưu, đọc dữ liệu ra bên ngoài như lưu dữ liệu ra ổ cứng hay đọc cookie từ trình duyệt… đều cần đợi kết quả).

Những việc như thế trong lập trình hàm gọi nó là side effects.

--------------------

Khác nhau gì?

a. Generator function : Generator function là function có khả năng hoãn lại quá trình thực thi mà vẫn giữ nguyên được context

- Đơn giản thì generator function là 1 function có khả năng tạm ngưng trước khi hàm kết thúc (khác với pure function khi được gọi sẽ thực thi hết các câu lệnh trong hàm), và có thể tiếp tục chạy tại một thời điểm khác.

- Chính chức năng mới này giúp ta giải quyết được việc bất đồng bộ, hàm sẽ dừng và đợi async chạy xong rồi tiếp tục thực thi.

b. Saga hoạt động như thế nào vậy ?

- Redux-saga tạo ra phần side-effect độc lập với actions và mỗi action tương ứng sẽ có 1 saga tương ứng xử lý.
- Redux saga cung cấp các hàm helper effect
- Các hàm này sẽ trả về một effect object chứa đựng thông tin đặc biệt chỉ dẫn middeware của Redux có thể thực hiện tiếp các hành động khác
- Về tư tưởng thì saga là: Saga =Worker+Watcher
Worker: là 1 hàm làm nhiệm vụ get/fetch data từ api về sau đó dispatch 1 action
Watcher: là 1 hàm nào đó có nhiệm vụ lắng nghe 1 action nào đó ở view và gọi 1 worker tương ứng để xử lý action đó
Một số hàm helper trong redux saga:

1. takeEvery() : thực thi và trả lại kết quả của mọi actions được gọi.
2. takeLastest() : có nghĩa là nếu chúng ta thực hiện một loạt các actions, nó sẽ chỉ thực thi và trả lại kết quả của của actions cuối cùng.
3. take() : tạm dừng cho đến khi nhận được action
4. put() : dispatch một action.
5. call(): gọi function. Nếu nó return về một promise, tạm dừng saga cho đến khi promise được giải quyết.
6. race() : chạy nhiều effect đồng thời, sau đó hủy tất cả nếu một trong số đó kết thúc

c. Saga có ưu/ nhược điểm gì vậy?

Ưu điểm:

-Do tách riêng side-effect ra khỏi action nên việc testing là dễ dàng hơn Redux-Thunk.

- Giữ cho action pure synchronos theo chuẩn redux và loại bỏ hoàn toàn callback theo javascript truyền thống.

Nhược điểm

- Function ko viết được dạng arrow-function.

- Phải hiểu về Generator function và các khái niệm trong saga pattern

4. Redux-Thunk là gì và hoạt động như thế nào ?

a. Thunk là gì?
Thunk là 1 function mà nó khác biệt những function bình thường là thay vì return trực tiếp kết quả thì thunk lại return ra 1 function và trong function đó làm tiếp một vài nhiệm vụ nữa sau đó mới return ra kết quả cuối cùng.
b. Redux-Thunk là sao?
- Trong redux-thunk áp dụng nguyên lý của Thunk để return 1 function có 2 tham số getState và dispatch 2 tham số này chính là 2 thuộc tính của store trong Redux
- Bằng cách này thì redux-thunk cho phép ta tạo ra side-effect ( như fetch data, delay request …) sau đó mới dispatch 1 action 
c. Tổng quan và nhận xét chung về redux-thunk

Nhìn chung redux-thunk là khá dễ hiểu, dễ code nhưng chưa thật sự mạnh mẽ trong nhiều tình huống như sau:

- Tạm dừng 1 Request hoặc hủy request khi đang call api.- Bài toán click vào Button để fetch data nếu click liên tục nhưng chỉ lấy lần click sau cùng?

- Bài toán Auto-Search, tự động hiển thị kết quả sau mỗi lần gõ text, để tránh request server liên tục thì yêu cầu sau 1 khoảng thời gian ví dụ 2s thì mới thực hiện request, hoặc gõ từ khóa mà nó trùng với từ khóa trước thì ko request lại.

- Tự động Retry request một vài lần khi có sự cố ví dụ như sự cố mạng xảy ra?

… và còn nhiều yêu cầu khác phức tạp hơn nữa...