Tìm hiểu về Redux Thunk

Chào mọi người, trường hợp bạn là người đã biết về React và đang khiến quen sở hữu Redux chắn chắn hẳn bạn đang siêu mơ hồ về những khái niệm cơ bản của Redux như dispatch, retailer, motion creator,… bạn còn đang vật lộn sở hữu đống doc của Redux để hiểu những khái niệm đấy và bạn nghe ai đấy trong crew nói về Redux Thunk, thế là lại 1 khái niệm nữa cần cần tìm hiểu và bạn khởi đầu lẫn lộn giữa Redux, Thunk hay thậm chí là Middleware.

Vậy nên hôm nay chúng ta sẽ cùng tìm hiểu về phương pháp hoạt động của Redux Thunk.

1. Nhắc lại về Redux

Redux js là 1 thư viện Javascript giúp tạo ra thành 1 lớp quản lý trạng thái của ứng dụng. Được dựa trên ứng dụng của ngôn ngữ Elm kiến trúc Flux do Fb giới thiệu, do vậy Redux thường là bộ đôi hài hòa hoàn hảo sở hữu React.

Lúc 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 1 Retailer duy nhất, lúc ta muốn thay thế đổi 1 State nào đấy, tại 1 Part, ta cần tạo 1 Motion, Part này sẽ đóng vai trò là Motion creator (nói nôm na là bộ tạo Motion ) thông thường 1 Motion là 1 object, người mua lưu ý điểm này nhé, Motion cần là 1 object. 1 Motion luôn luôn có giá trị trả về sort và giá trị payload có thể có hoặc ko. Tại đây ta có dí dụ về 1 Motion đơn giản trả về cho Reducer 1 đối tượng track.

Xem Thêm  Larva Heroes: Lavengers cho Android 2.7.8 – Recreation Larva thủ thành trên Android

export const selectedSong = track => { return { sort: “SONG_SELECTED”, payload: track }; };

Motion này sẽ được đưa tới toàn bộ những Reducer và chỉ những Reducer lưu ý tới sort của Motion này sẽ phân tách Motion được gửi lên và tiếp tục xử lý và cuối cùng trả ra 1 state new đưa tới Part như 1 props. Tổng quát, vòng đời của Redux được mô tả như hình dưới đây:

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

Tới đây người mua sẽ thắc mắc vậy Redux Thunk là gì và nó được ứng dụng như thế nào. Chúng ta cùng quay lại dí dụ về Motion trên bên trên, ta thấy rằng Motion này trả về 1 plain Javascript object, object này là hợp lệ để những Reducer có thể tiếp nhận và xử lý nó. Nhưng đôi lúc trong ứng dụng của chúng ta nó lại ko đơn giản như vậy những motion cần trả về 1 perform chẳng hạn, những motion này được gọi là Async Motion, thì đây là nơi mà Redux Thunk khiến việc, ta lấy 1 dí dụ về 1 trường hợp Motion ko còn là 1 plain object nữa:

impport dataUsers from ‘../api/datausers’; export const getUsers = async () => { const response = await sentayho.com.vn(‘/customers’); return { sort: ‘GET_USERS’, payload: response } };

“Đợi đã! Motion này cũng là 1 plain object mà, nó cũng gồm cặp key và worth đấy thôi” – đây là sai lầm của người mua new khiến quen sở hữu javascript hay React. Motion này ko cần là 1 plain javascript object dù rằng nó có cú pháp giống sở hữu 1 PJO. Nhờ có vào việc dùng cú pháp ES6 mà nó dễ gây nhầm lẫn cho những bạn new khởi đầu, ko tin người mua cứ thử đánh giá đoạn code trên sở hữu Babel xem, và bạn sẽ thấy phần return trả về 1 đống code dài dòng khó hiểu chứ ko còn là 1 PJO nữa. Do vậy phương pháp tiếp cận trên trên là sai sở hữu khái niệm của 1 Motion thông thường.

Xem Thêm  Tải Adobe Reader 11 – Obtain Adobe Acrobat Reader DC, phần mềm đọc f

Quay lại sở hữu Thunk, Redux Thunk cho phép trả về những Motion là 1 perform thay thế vì chỉ là 1 PJO, nó đóng vai trò là 1 Middleware được đặt trước thời điểm reducer nhận request để nhận biết những motion có trả về 1 PJO hay ko, trường hợp đấy là 1 PJO, Thunk sẽ chuyển motion đấy tới Reducer như thường lệ, trường hợp motion trả về là 1 perform, Redux Thunk sẽ “chặn” motion đấy lại và đợi cho tới lúc 1 lệnh asynchronous nào đấy trong perform hoàn thành và trả về kết quả (như giá trị response trên trên). Tới đây chúng ta đã nhận được 1 PJO và Redux Thunk sẽ cho motion này tới Reducer như bình thường. Do vậy chúng ta có sơ đồ như sau:

Ta viết lại Motion trên trên, thay thế vì return, ta dùng hàm dispatch

impport dataUsers from ‘../api/datausers’; export const getUsers = () => async dispatch => { const response = await sentayho.com.vn(‘/customers’); dispatch({ sort: ‘GET_USERS’, payload: response }); };

3. Kết luận

  • Redux Thunk là 1 Middleware cho phép bạn viết những Motion trả về 1 perform thay thế vì 1 plain javascript object bằng phương pháp trì hoãn việc đưa motion tới reducer.
  • Redux Thunk được dùng để xử lý những logic bất đồng bộ phức tạp cần truy cập tới Retailer hoặc đơn giản là việc lấy dữ liệu như Ajax request.

Tới đây có lẽ người mua đã hiểu được phần đích của Redux Thunk được sử sụng trong những dự án rồi, trên kỳ tới chúng ta sẽ cùng nói kỹ hơn về Async Motion sở hữu Redux Thunk, hẹn gặp lại trên bài viết tới.

Xem Thêm  Những quẻ Phải chăng trong Kinh Dịch | Nhã Thanh Dịch Học Sĩ

Tham khảo sentayho.com.vn/@User3141592/understanding-the-redux-thunk-source-code-b3f8b930faf6