xin chào các bạn, nếu bạn là người đã biết về react và đã quen thuộc với redux thì có lẽ bạn đang rất bỡ ngỡ về những kiến thức cơ bản về redux như công văn, cửa hàng, trình tạo hành động, … mà bạn vẫn đang làm việc. tài liệu về redux để hiểu các khái niệm đó và bạn nghe ai đó trong nhóm nói về redux thunk, đó là một khái niệm khác để tìm hiểu và bạn bắt đầu nhầm lẫn giữa redux, thunk hoặc thậm chí redux.middleware.
vì vậy hôm nay chúng ta sẽ tìm hiểu cách hoạt động của redux thunk.
Bạn đang xem: Redux thunk là gì
Tóm Tắt
1. giảm lại
redux js là một thư viện javascript tạo ra một lớp để quản lý trạng thái của ứng dụng. dựa trên ngôn ngữ elm kiến trúc flux do facebook giới thiệu, redux thường là sự kết hợp hoàn hảo để phản ứng.
Xem thêm: Mifestad 200 là thuốc gì? Công dụng & liều dùng Hello Bacsi
khi chúng ta sử dụng redux trong ứng dụng của mình, trạng thái của toàn bộ ứng dụng được lưu trữ trong một cửa hàng duy nhất, khi chúng ta muốn thay đổi một trạng thái nhất định, trong một thành phần, chúng ta cần tạo một hành động, thành phần này sẽ hoạt động như một người tạo action (nói ngắn gọn là người tạo hành động) thông thường một hành động là một đối tượng, lưu ý điểm này, hành động phải là một đối tượng. một hành động luôn có kiểu trả về và giá trị tải trọng có thể có hoặc có thể không. Dưới đây là một ví dụ về một hành động đơn giản trả về một đối tượng bài hát cho bộ giảm tốc.
hành động này
sẽ được chuyển cho tất cả các bộ giảm và chỉ các bộ giảm quan tâm đến loại hành động này sẽ phân tích cú pháp hành động đã gửi và sau đó xử lý nó và cuối cùng trả lại trạng thái mới được chuyển cho thành phần dưới dạng đạo cụ. Nói chung, vòng đời của redux được mô tả như sau:
2. vậy redux thunk là gì?
ở đây, bạn có thể tự hỏi redux thunk là gì và nó được áp dụng như thế nào. Quay trở lại ví dụ hành động trước, chúng ta thấy rằng hành động này trả về một đối tượng javascript đơn giản, đối tượng này có giá trị để các bộ giảm tiếp nhận và xử lý. nhưng đôi khi trong ứng dụng của chúng ta, nó không đơn giản như vậy, hành động sẽ trả về một hàm, ví dụ, những hành động này được gọi là hành động không đồng bộ, đây là nơi thunk redux hoạt động, hãy lấy một ví dụ về trường hợp mà hành động không còn đơn giản nữa. đối tượng:
“khoan đã! action này cũng là một đối tượng đơn giản, nó cũng chứa các cặp giá trị khóa” – đây là lỗi của những người mới làm quen với javascript hoặc react. action này không phải là một đối tượng javascript đơn giản, mặc dù nó có cùng cú pháp với pjo. nhờ sử dụng cú pháp es6 rất dễ nhầm lẫn cho người mới bắt đầu, nếu không nghĩ vậy bạn hãy thử làm thử đoạn mã trên với babel, bạn sẽ thấy phần return trả về rất nhiều đoạn mã khó hiểu nhưng không phải là một. pjo nhiều hơn nữa. vì vậy cách tiếp cận trên là sai với khái niệm về một hành động bình thường.
Xem thêm: Các phương châm hội thoại?
quay trở lại với thunk, redux thunk cho phép trả về các hành động dưới dạng một hàm thay vì chỉ là một pjo, nó hoạt động như một phần mềm trung gian được đặt trước khi trình giảm thiểu nhận được yêu cầu để biết liệu hành động có trả về một pjo hay không, nếu nó là một pjo, thunk sẽ truyền hành động cho bộ giảm như bình thường, nếu hành động trả về là một hàm, redux thunk sẽ “chặn” hành động và đợi cho đến khi một số câu lệnh async trong hàm hoàn thành và trả về kết quả (như giá trị của câu trả lời trước). cho đến nay chúng ta có một pjo và redux thunk sẽ gửi hành động này đến bộ giảm như bình thường. thì chúng ta có sơ đồ sau:
chúng tôi viết lại hành động trước đó, thay vì quay lại, chúng tôi sử dụng công văn
3. kết luận
- redux thunk là một phần mềm trung gian cho phép bạn viết các hành động trả về một hàm thay vì một đối tượng javascript đơn giản bằng cách trì hoãn việc phân phối hành động tới trình giảm bớt.
- redux thunk được sử dụng để xử lý logic không đồng bộ phức tạp yêu cầu quyền truy cập vào cửa hàng hoặc chỉ truy xuất dữ liệu dưới dạng yêu cầu ajax.
đến đây chắc bạn đã hiểu mục đích của redux thunk được sử dụng trong các dự án, lần sau chúng ta sẽ nói rõ hơn về hành động không đồng bộ với redux thunk, hẹn gặp lại ở bài sau. .
xem https://medium.com/@user3141592/und hieu-the-redux-thunk-source-code-b3f8b930faf6
Xem thêm: Axit là gì? Tính chất hóa học và ứng dụng quan trọng trong cuộc sống
