Redux Toolkit Query dapat menghilangkan rasa sakit dari sebagian besar pekerjaan manajemen data Anda. Temukan caranya.

React adalah pustaka JavaScript populer untuk membangun antarmuka pengguna untuk aplikasi web. Saat membuat aplikasi, penting untuk mempertimbangkan pendekatan manajemen data yang efisien untuk memastikan Anda mengambil dan merender data di browser dengan tepat, sebagai respons terhadap interaksi pengguna.

Namun, mengelola proses ini tampaknya dapat menjadi tugas yang membosankan dan rawan kesalahan terutama jika Anda mengambil data dari berbagai sumber, dan Anda perlu memperbarui sejumlah status secara konsisten. Dalam kasus seperti itu, Redux Toolkit Query memberikan solusi yang efisien.

Kueri Redux Toolkit (RTK Query) adalah alat pengambilan data yang dibangun di atas Redux Toolkit. Dokumentasi resminya menggambarkan RTK Query sebagai "alat pengambilan data dan caching yang kuat yang dirancang untuk menyederhanakan kasus umum untuk memuat data dalam aplikasi web, menghilangkan kebutuhan untuk menulis tangan mengambil data & logika caching dirimu sendiri".

instagram viewer

Pada dasarnya, ini menyediakan serangkaian fitur dan kemampuan yang merampingkan proses pengambilan dan pengelolaan data dari API atau sumber data lainnya dari aplikasi React.

Meskipun ada kesamaan antara Redux Toolkit Query dan React Query, satu keunggulan utama Redux Toolkit Query adalah integrasinya yang lancar dengan Redux, perpustakaan manajemen negara, memungkinkan pengambilan data lengkap dan solusi manajemen status untuk aplikasi React saat digunakan bersama.

Beberapa fitur inti RTK termasuk caching data, fitur manajemen kueri, dan penanganan kesalahan.

Untuk memulai, Anda dapat dengan cepat menjalankan proyek React secara lokal menggunakan Buat Aplikasi Bereaksi memerintah.

mkdir Bereaksi-RTQ
cd Bereaksi-RTQ
npx buat-reaksi-aplikasi reaksi-rtq-contoh
cd react-rtq-contoh 
mulai npm

Alternatifnya, Anda bisa menyiapkan proyek Bereaksi menggunakan Vite, alat bangun baru dan server pengembangan untuk aplikasi web.

Anda dapat menemukan kode proyek ini di sini repositori GitHub.

Instal Dependensi yang Diperlukan

Setelah proyek React Anda aktif dan berjalan, lanjutkan dan instal paket-paket berikut.

npm install @reduxjs/toolkit react-redux

Tentukan Slice API

Irisan API adalah komponen yang mencakup logika Redux yang diperlukan untuk mengintegrasikan dan berinteraksi dengan titik akhir API yang ditentukan. Ini menyediakan cara standar untuk menentukan titik akhir kueri untuk mengambil data dan titik akhir mutasi untuk memodifikasi data.

Pada dasarnya, irisan API memungkinkan Anda menentukan titik akhir untuk meminta dan membuat perubahan pada data dari sumber tertentu, memberikan pendekatan yang disederhanakan untuk mengintegrasikan dengan API.

Dalam src direktori, buat folder baru dan beri nama, fitur. Di dalam folder ini, buat file baru: apiSlice.js, dan tambahkan kode di bawah ini:

impor { createApi, fetchBaseQuery } dari"@reduxjs/toolkit/permintaan/reaksi";
eksporconst productApi = buatApi({
 jalur peredam: "ProdukAp",
 baseQuery: ambilBaseQuery({ baseUrl: " https://dummyjson.com/" }),


 titik akhir: (pembangun) => ({
 getAllProducts: builder.query({
 pertanyaan: () =>"produk",
 }),
 dapatkanProduk: builder.query({
 pertanyaan: (produk) =>`produk/pencarian? q=${produk}`, 
 }),
 }),
});
eksporconst { useGetAllProductsQuery, useGetProductQuery } = productsApi;

Kode ini mendefinisikan irisan API yang disebut produkApi menggunakan Redux Toolkit createApi fungsi. Irisan API menggunakan properti berikut:

  • A ReducerPath properti - menetapkan nama peredam di toko Redux.
  • Itu baseQuery properti - menentukan URL dasar untuk semua permintaan API menggunakan ambilBaseQuery fungsi yang disediakan oleh Redux Toolkit.
  • API titik akhir - tentukan titik akhir yang tersedia untuk potongan API ini menggunakan pembangun obyek. Dalam hal ini, kode mendefinisikan dua titik akhir.

Akhirnya, dua kait dihasilkan dari produk API objek yang mengidentifikasi dua titik akhir. Anda bisa menggunakan hook ini di berbagai komponen React untuk membuat permintaan API, mengambil data, dan mengubah status sebagai respons terhadap interaksi pengguna.

Pendekatan ini merampingkan manajemen status dan pengambilan data dalam aplikasi React.

Konfigurasikan Toko Redux

Setelah mengambil data dari API, RTK Query meng-cache data di toko Redux. Store, dalam hal ini, berfungsi sebagai hub pusat untuk mengelola status permintaan API yang dibuat dari React aplikasi, termasuk data yang diambil dari permintaan API tersebut yang memastikan akses komponen dan memperbarui data ini sebagai diperlukan.

Di direktori src, buat a store.js file dan tambahkan baris kode berikut:

impor { konfigurasiStore } dari"@reduxjs/toolkit";
impor {produkApi} dari"./fitur/apiSlice";
eksporconst toko = konfigurasiStore({
 peredam: {
 [productsApi.reducerPath]: productApi.reducer,
 },
 middleware: (getDefaultMiddleware) =>
 getDefaultMiddleware().concat (productsApi.middleware),
});

Kode ini membuat toko Redux baru, dengan dua konfigurasi utama:

  1. Peredam: Ini menentukan bagaimana toko harus menangani pembaruan ke negara bagian. Dalam hal ini, productApi.reducer diteruskan sebagai fungsi peredam dan diberi kunci peredam unik untuk mengidentifikasinya dalam status keseluruhan toko.
  2. Middleware: Ini mendefinisikan setiap middleware tambahan yang harus diterapkan ke toko.

Hasilnya toko objek adalah toko Redux yang dikonfigurasi sepenuhnya, yang dapat digunakan untuk mengelola status aplikasi.

Dengan mengonfigurasi toko dengan cara ini, aplikasi dapat dengan mudah mengelola status permintaan API, dan memproses hasilnya dengan cara standar menggunakan Redux Toolkit.

Buat Komponen untuk Mengimplementasikan Fungsi RTK

Di direktori src, buat yang baru komponen folder dengan file baru di dalamnya: Data.js.

Tambahkan kode ini ke file Data.js:

impor { useGetAllProductsQuery } dari"../fitur/apiSlice";
impor Bereaksi, { useState } dari"reaksi";
impor"./produk.komponen.css";
eksporconst Data = () => {
const { data, error, isLoading, refetch } = useGetAllProductsQuery();
const [productsData, setProductsData] = useState([]);


const handleDisplayData = () => {
 ambil ulang();
 setProductsData (data?.produk);
 };
kembali (
"wadah-produk">

Kode ini mendemonstrasikan komponen React yang menggunakan hook useGetAllProductsQuery yang disediakan oleh irisan API untuk mengambil data dari titik akhir API yang ditentukan.

Saat pengguna mengklik tombol Display Data, fungsi handleDisplayData dijalankan, mengirimkan permintaan HTTP ke API untuk mengambil data produk. Setelah respons diterima, variabel data produk diperbarui dengan data respons. Terakhir, komponen merender daftar detail produk.

Perbarui Komponen Aplikasi

Lakukan perubahan berikut pada kode di file App.js:

impor"./App.css";
impor { Data } dari"./komponen/Data";
impor { toko } dari"./toko";
impor { Pemberi } dari"reaksi-redux";
impor { Penyedia Api } dari"@reduxjs/toolkit/permintaan/reaksi";
impor {produkApi} dari"./fitur/apiSlice";
fungsiAplikasi() {
kembali (


"Aplikasi">

 </div>
 </ApiProvider>
 </Provider>
 );
}
eksporbawaan Aplikasi;

Kode ini membungkus komponen Data dengan dua penyedia. Kedua penyedia ini memberikan akses komponen ke toko Redux dan fitur RTK Query yang memungkinkannya mengambil dan menampilkan data dari API.

Sangat mudah untuk mengonfigurasi Redux Toolkit Query untuk mengambil data secara efisien dari sumber tertentu dengan kode minimal. Selain itu, Anda juga dapat menggabungkan fungsi untuk memodifikasi data yang disimpan dengan menentukan titik akhir mutasi dalam komponen irisan API.

Dengan menggabungkan fitur Redux dengan kemampuan pengambilan data RTK, Anda dapat memperoleh solusi manajemen status yang komprehensif untuk aplikasi web React Anda.