Middleware Redux là gì
Redux cho người mới bắt đầu - Part 3 Middleware
Bài đăng này đã không được cập nhật trong 4 năm Mở đầuChào tất cả mọi người, chúng ta lại gặp nhau trong bài viết thứ 3 của series Redux cho người mới bắt đầu sau 1 thời gian rất rất dài (vì đứa viết bài lười quá (yaoming) ). Ở bài viết số 2, chúng ta đã làm thử một ứng dụng To-Do đơn giản. Trong thực tế, ứng dụng của chúng ta còn cần giải quyết nhiều vấn đề hơn như ghi log hoạt động, handle error, async... Để giải quyết những vấn đề này, Redux đã đưa ra giải pháp gì, chúng ta sẽ tìm hiểu trong bài viết này. Middleware
It provides a third-party extension point between dispatching an action, and the moment it reaches the reducer. Hiểu một cách đơn giản middleware cho phép chúng ta can thiệp vào giữa thời điểm dispatch một action và thời điểm action đến được reducer. Chúng ta có thể thấy sự thay đổi của flow khi có sử dụng middleware qua hình dưới: Sử dụng MiddlewareĐể sử dụng được Middleware chúng ta cần sử dụng function
À thế cái Middleware waysHiện tại, có khá nhiều thư viện middleware cho Redux, cá nhân mình thì thấy có 3 thư viện chúng ta nên thử qua Redux-Thunk: Function ActionRedux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters. Redux Thunk documentation Khá là dễ hiểu, DemoTrước hết, chúng ta cứ chuẩn bị một project mới đã. Lần này chúng ta sẽ làm một ứng dụng load dữ liệu.
Khâu chuẩn bị đã xong. À khoan chúng ta còn cần 1 api để load dữ liệu nữa. Respone chậm một chút để nhận thấy sự thay đổi.
Để sử dụng thunk chúng ta sẽ chỉ cần thêm một vài dòng code:
Khi action Thunk là một function được bao lại để tạm dừng nó cho đến khi được gọi Chúng ta cũng cần thay đổi view một chút:
Giờ thì thử click vào nút màu xanh và xem kết quả. Vậy là chúng ta đã sử dụng được Chúng ta Ưu điểm:
Nhược điểm:
KếtChúng ta đã cùng nhau điểm qua khái niệm và sử dụng một middleware đơn giản. Không quá nhiều nhưng chúng ta cũng đã có được những cái nhìn đầu tiên. Middleware là một khái niệm khá thú vị của Redux. Nó hoạt động ra sao, làm thế nào để tự viết được một Middleware hay những thư viện Middleware xuất hiện sau nó đều là những thứ hay ho đáng xem qua. Hẹn gặp lại mọi người trong phần tiếp theo (hi vọng là không xa lắm (yaoming) ) |