Tìm hiểu về Redux Thunk

Chắc chắn nếu bạn là người đã biết về React và đang làm quen với Redux, bạn đang rất mơ hồ về các khái niệm cơ bản của Redux như gửi đi, kho lưu trữ, tạo ra hành động,… Bạn đang vật lộn với đống tài liệu của Redux để hiểu những khái niệm đó và bạn nghe ai đó trong nhóm nói về Redux Thunk, thế là lại một khái niệm nữa cần phải tìm hiểu và bạn bắt đầu lẫn lộn giữa Redux, Thunk hay thậm chí là Trung gian. Chào mọi người.

Vì vậy, ngày hôm nay chúng ta sẽ cùng khám phá về cách thức hoạt động của Redux Thunk.

Bạn Đang Xem: Tìm hiểu về Redux Thunk

1. Nhắc lại về Redux

React thường được sử dụng cùng với Redux để quản lý trạng thái của ứng dụng. Redux js là một thư viện Javascript được dựa trên kiến trúc Flux do Facebook giới thiệu. Nó giúp tạo ra một lớp quản lý trạng thái của ứng dụng và thường là cặp đôi hoàn hảo kết hợp với React.

Duy nhất Cửa hàng một lưu được dụng ứng ứng của trạng thái (State) toàn bộ trong có thay đổi muốn ta khi đó, đóng sẽ này Thành phần một tại đó Trạng thái đó, Hành động một tạo cần ta nôm na bộ là trò vai đóng sẽ này Thành phần, một Hành động đối tượng, điểm lưu bạn các này Hành động phải đối tượng nhé, giá trị gửi có thể có hoặc không và có trả về giá trị luôn loại và trả về có Hành động Một. Đơn giản trả một Bộ giảm đơn giản ví dụ về có ta ở đây đối tượng duy nhất.

Xem Thêm : Một văn bản khoa học là gì? Các tính năng hàng đầu / Văn học – Mindovermetal Việt Nam

Export const selectedSong = bàiHát => { return { loại: ”BÀI_HÁT_ĐƯỢC_CHỌN”, tảiLên: bàiHát }; };.

Component nhận Action từ người dùng và chuyển tiếp lên Reducer.Reducer nhận Action và dựa vào loại của Action, phân tích và xử lý Action.Reducer trả về một trạng thái mới.Component nhận trạng thái mới từ Reducer và cập nhật lại props.Component render lại với props mới.

2. Vậy Redux Thunk là gì?

Ví dụ về một trường hợp Action không còn là một đối tượng đơn giản nữa, ta lấy một ví dụ về một trường hợp Action không còn là một đối tượng đơn giản nữa, Đến đây các bạn sẽ thắc mắc vậy Redux Thunk là gì và nó được áp dụng như thế nào, Chúng ta cùng quay lại ví dụ về Action ở phía trên, ta thấy rằng Action này trả về một đối tượng Javascript đơn giản, đối tượng này là hợp lệ để các Reducer có thể tiếp nhận và xử lý nó, Nhưng đôi khi trong ứng dụng của chúng ta nó lại không đơn giản như vậy các action cần trả về một hàm chẳng hạn, các action này được gọi là Async Action, thì đây là nơi mà Redux Thunk làm việc.

Export const getUsers = async () => { const response = await Domainente(‘/users’); return { type: ‘GET_USERS’, payload: response };};import dataUsers from ‘../Api/datausers’;

Phương pháp tiếp cận trên là không đúng với khái niệm của một Hành động thông thường. Hành động này không phải là một đối tượng javascript đơn giản mặc dù nó có cú pháp tương tự như một đối tượng javascript thuần. Nhờ vào việc sử dụng cú pháp ES6, nó dễ gây hiểu lầm cho những người mới bắt đầu. Đừng tin, hãy thử kiểm tra đoạn mã trên với Babel và bạn sẽ thấy rằng phần return trả về một đoạn mã dài và khó hiểu thay vì một đối tượng javascript thuần. Chờ đã! Hành động này cũng là một đối tượng thuần mà, nó cũng bao gồm các cặp khóa và giá trị thôi” – đây là lỗi của những người mới làm quen với javascript hoặc React.

Xem Thêm : Ưu nhược điểm của ngành POD là gì? 3 Bước kiếm tiền với mô hình Print on Demand

Sau đó, chúng ta đã nhận được một PJO và Redux Thunk sẽ cho hành động này đến Reducer như bình thường. Do vậy, chúng ta có sơ đồ như sau: Quay lại với Thunk, Redux Thunk cho phép trả về các Hành động là một hàm thay vì chỉ là một PJO. Nó đóng vai trò là một Trung gian được đặt trước thời điểm reducer nhận yêu cầu để nhận biết các hành động có trả về một PJO hay không. Nếu đó là một PJO, Thunk sẽ chuyển hành động đó đến Reducer như thường lệ. Nếu hành động trả về là một hàm, Redux Thunk sẽ “chặn” hành động đó lại và đợi cho đến khi một lệnh bất đồng bộ nào đó trong hàm hoàn tất và trả về kết quả (như giá trị phản hồi ở trên).

Ta viết lại Hành động ở trên, thay vì trả về, ta sử dụng hàm dispatch.

Xuất khẩu hằng số lấy người dùng = () => async gửi đi => { const phản hồi = await impport dataUsers từ ‘../Api/datausers’; gửi đi({ loại: ‘GET_USERS’, tải trọng: phản hồi });};

3. Kết luận

Các bạn có thể đã hiểu được mục đích của Redux Thunk được sử dụng trong các dự án rồi đến đây, ở kỳ tiếp theo chúng ta sẽ cùng nói chi tiết hơn về Hành động Bất đồng bộ với Redux Thunk, hẹn gặp lại trong bài viết tiếp theo.

Xem xét Domainente/@User3141592/hiểu mã nguồn của Redux Thunk – b3f8b930faf6.

Nguồn: https://domainente.com
Danh mục: Chia sẻ