Sự kỳ diệu của RTK Query - Redux toolkit query
Chào mừng bạn đến với video ‘Sự kỳ diệu của RTK Query - Redux toolkit query
Trong video này mình sẽ làm một ví nhỏ để các bạn thấy được dự vi diệu của RTK Query - Redux toolkit query.
Vài dòng giới thiệu về RTK Query - Redux toolkit query
RTK Query là một phần mới của redux toolkit
Redux Toolkit Query, còn được gọi là RTK Query, là một công cụ mạnh mẽ để lấy và lưu trữ dữ liệu. Nó được thiết kế để đơn giản hóa các trường hợp phổ biến khi tải dữ liệu trong một ứng dụng web, loại bỏ nhu cầu phải tự viết logic lấy dữ liệu và lưu trữ cache.
RTK Query lấy cảm hứng từ các công cụ khác đã tiên phong trong việc giải quyết vấn đề lấy dữ liệu, như Apollo Client, React Query, Urql và SWR, nhưng thêm vào một cách tiếp cận độc đáo với thiết kế API của nó:
- Logic lấy dữ liệu và lưu trữ cache được xây dựng trên Redux Toolkit’s createSlice và createAsyncThunk APIs.
- Vì Redux Toolkit không phụ thuộc vào giao diện người dùng, chức năng của RTK Query có thể được sử dụng với bất kỳ lớp giao diện người dùng nào.
- Các điểm cuối API được xác định trước, bao gồm cách tạo ra tham số truy vấn từ các đối số và biến đổi phản hồi để lưu trữ cache.
- RTK Query cũng có thể tạo ra React hooks mà bao gồm toàn bộ quá trình lấy dữ liệu, cung cấp dữ liệu và các trường isLoading cho các thành phần, và quản lý tuổi thọ của dữ liệu đã lưu trong cache khi các thành phần được gắn kết và tháo rời.
RTK Query cung cấp các tùy chọn “vòng đời mục cache” cho phép các trường hợp sử dụng như cập nhật cache thông qua thông điệp websocket sau khi lấy dữ liệu ban đầu.
Пікірлер: 13
Cảm ơn anh
mình đang dùng quen react query hơn nhưng xem video của bạn để học thêm :))
video rất hữu ích! Cảm ơn kênh
cám ơn anh. e có cái phân vân là khi mình dùng RTKQuery dùng để callAPI thì mình có thể loại bỏ hẳn luôn axios và các middleware như thunk, saga phải không ạ? Nếu không thì mình kết hợp RTKQuery, axios, middleware trong trường hợp nào ạ?
@thangthocode
6 ай бұрын
Cảm ơn bạn đã ủng hộ. Chính xác, mình có thể loại bỏ hết các middleware ( bản chất thì redux-tookit đã tích hợp sẵn thunk trong nội tại rồi ). Middleware thì k cần thiết nữa vì RTKQuery đã có rất nhiều công cụ để làm những việc trước phải thêm middleware để có thể xử lý,.Còn axios thì bạn vẫn có thể tích hợp thêm vào trong trường hợp muốn custom các call api , ví dụ như thêm token, bạn có thể đọc thêm việc sử dụng axios trong RTKQuery ở đây redux-toolkit.js.org/rtk-query/usage/customizing-queries#axios-basequery
Tanstack query ngon hơn nhiều
đuôi .tsx là ngôn ngữ gì vậy anh
@thangthocode
9 ай бұрын
Chào bạn, .tsx là đuôi file của react viết bằng typescript bạn nhá. React có đuôi .ts hay .js thì đều dùng được RTK Query bạn ạ.
@huynhdung3963
6 ай бұрын
là file javascript sử dụng typescript và xml (giống html)
@hungify
2 ай бұрын
@@thangthocode react dùng với typescript mà return jsx thì đâu có để tên file là ts được đâu ạ
@thangthocode
2 ай бұрын
Bạn có thể config trong webpack để đọc file ts như tsx nhé, nhưng thông thường .tsx sẽ dùng để định nghĩa các component có return jsx. ts để dùng cho các trường hợp khác dùng typescript. Nếu bạn viết 1 custom hook có sử dụng rtk query thì cũng k cần dùng .tsx
@hungify
2 ай бұрын
@@thangthocode Do e xài vite Mà để ts hắn báo lỗi Mà mình phân biệt ra cho rõ ràng thì tốt hơn