Redux thunk là gì? Redux thunk khác gì Redux saga?

Để quản lý tốt các phần mềm, ứng dụng trong khi làm việc với React hay các dự án ứng dụng Single Page thì lựa chọn Redux thunk chính là giải pháp tốt nhất. Vậy Redux thunk là gì? Sự khác nhau giữa Reduc thunk với Redux saga là gì? Hãy cùng Xuyên Việt Media tìm hiểu thông tin ngay dưới bài viết sau đây. 

Redux là gì?

Trước khi tìm hiểu về Redux thunk là gì, cùng tìm hiểu về khái niệm của Redux. Redux js là một thư viện Javascript giúp tạo ra thành một lớp quản lý trạng thái của ứng dụng. Được dựa trên nền tảng của ngôn ngữ Elm kiến trúc Flux do Facebook giới thiệu, do vậy Redux thường là bộ đôi kết hợp hoàn hảo với React.

Khi sử dụng Redux trong ứng dụng của mình, trạng thái (State) của toàn bộ ứng dụng được lưu trong một Store duy nhất, khi ta muốn thay đổi một State nào đó, tại một Component, ta cần tạo một Action, Component này sẽ đóng vai trò là Action creator (nói nôm na là bộ tạo Action ) thông thường một Action là một object, các bạn lưu ý điểm này nhé, Action phải là một object. Một Action luôn luôn có giá trị trả về type và giá trị payload có thể có hoặc không. Ở đây ta có ví dụ về một Action đơn giản trả về cho Reducer một đối tượng song.

Action này sẽ được đưa đến tất cả các Reducer và chỉ những Reducer quan tâm đến type của Action này sẽ phân tích Action được gửi lên và sau đó xử lý và cuối cùng trả ra một state mới đưa đến Component như một props. Tổng quát, vòng đời của Redux được mô tả như sau: 

Action Creator – Action – Dispatch – Reducers – State. 

Redux Thunk là gì?

Redux Thunk cho phép trả về các Action là một function thay vì chỉ là một PJO. Redux thunk đóng vai trò là một Middleware được đặt trước thời điểm reducer nhận request để nhận biết các action có trả về một PJO hay không, nếu đó là một PJO, Thunk sẽ chuyển action đó đến Reducer như thường lệ. 

Nếu action trả về là một function, Redux Thunk sẽ “chặn” action đó lại và đợi cho đến khi một lệnh asynchronous nào đó trong function hoàn tất và trả về kết quả (như giá trị response ở trên). Đến đây chúng ta đã nhận được một PJO và Redux Thunk sẽ cho action này đến Reducer như bình thường. Do vậy chúng ta có sơ đồ như sau:

Action Creator – Action – Dispatch – Middleware – Reducers – State. 

>> Network key là gì? tại sao phải sử dụng Network key

Nên sử dụng Redux thunk trong trường hợp nào? 

Trong khi làm việc với redux, không thể tránh khỏi những yêu cầu bất đồng bộ, với redux core, một action chỉ cho phép return 1 plain object. Đây là lúc ta cần dùng đến middleware – redux-thunk là một ví dụ cho trường hợp này.

Middleware trong redux là một hàm được gọi mỗi khi một action được dispatch, middleware được phép thay đổi, cập nhật action. Hầu hết các middleware trong redux được dùng với các mục đích xử lý bất đồng bộ, redux-thunk là một middleware như vậy. Với việc dùng redux-thunk, action có thể returns object hoặc function.

Phân biệt sự khác nhau giữa Redux saga và Redux thunk là gì? 

Cùng tìm hiểu thông tin dưới đây để phân biệt rõ hơn về Reedux thunk và Redux saga ngay nhé: 

Redux-thunk

Redux thunk: Chắc các bạn cũng biết là action thường trả về dạng object, người ta hay gọi là plain Javascript object. Trong trường hợp mình muốn gọi một api để trả về một list trending thì action của mình không thể trả về một plain Javascript object thông thường được, mà mình sẽ phải trả về một function, action như vậy được gọi là async action. 

• Ưu điểm: Đơn giản, mạnh mẽ, dễ sử dụng , dễ tiếp cận đối với các bạn là mới học React.
• Nhược điểm: Chỉ phù hợp với các dự án nhỏ, xử lý logic đơn giản. Còn đối với những dự án phức tạp sử dụng redux-thunk sẽ phải tốn nhiều dòng code và gây khó khăn cho việc test các action.

Redux saga

Về mặt cơ chế hoạt động thì nó cũng tương tự như thunk, dùng để handle các side effect. 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 middleware của Redux có thể thực hiện tiếp các hành động khác. Các hàm helper effect sẽ được thực thi trong các generator function. Generator function là một tính năng mới trong ES6, nó cũng là một function. Tuy nhiên điểm đặc biệt của function này là có thể tạm dừng để thực thi một việc khác, hoặc có thể gọi đến một Generator function khác. 

Một số helper của generator function được redux saga sử dụng:

• takeEvery() : thực thi và trả lại kết quả của mọi actions được gọi.

• 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.
• take() : tạm dừng cho đến khi nhận được action
• put() : dispatch một action.
• 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.
• 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

• Ưu điểm: Đối với những dự án phức tạp sử dụng redux-saga code sẽ clean và dễ test hơn so với redux-thunk, giải quyết được những vấn đề về chains of promises.
• Nhược điểm: Phức tạp, tốn thời gian cho member mới vào team, nặng về xử lý logic, không dành cho những ứng dụng đơn giản. 

>> Sổ quỹ tiền mặt là gì? Cách lập và ghi sổ quỹ tiền mặt

Lời kết

Bài viết trên đây là những thông tin giải đáp về Redux thunk là gì. Hy vọng qua những chia sẻ ở trên giúp bạn có thông tin hữu ích hơn về Redux thunk. Theo dõi Xuyên Việt Media để cập nhật thêm nhiều thông tin thú vị mỗi ngày nhé.