Cara Mengambil Data di React Menggunakan Redux Toolkit Query
Table of content:
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 sendiri pengambilan data & caching logika”.
Baca Juga:
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 keuntungan utama dari Redux Toolkit Query adalah integrasinya yang mulus dengan Redux, sebuah pustaka manajemen status, yang 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 React-RTQ
cd React-RTQ
npx create-react-app react-rtq-example
cd react-rtq-example
npm start Sebagai alternatif, Anda dapat menyiapkan proyek React menggunakan Vite, alat build baru dan server pengembangan untuk aplikasi web.
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.jsdan tambahkan kode di bawah ini:
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";export const productsApi = createApi({
reducerPath: "productsAp",
baseQuery: fetchBaseQuery({ baseUrl: "https://dummyjson.com/" }),
endpoints: (builder) => ({
getAllProducts: builder.query({
query: () => "products",
}),
getProduct: builder.query({
query: (product) => `products/search?q=${product}`,
}),
}),
});
export const { 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. Toko, dalam hal ini, berfungsi sebagai hub pusat untuk mengelola status permintaan API yang dibuat dari aplikasi React, termasuk data yang diambil dari permintaan API tersebut yang memastikan komponen mengakses dan memperbarui data ini sesuai kebutuhan.
Di direktori src, buat a store.js file dan tambahkan baris kode berikut:
import { configureStore } from "@reduxjs/toolkit";
import { productsApi } from "./features/apiSlice";export const store = configureStore({
reducer: {
[productsApi.reducerPath]: productsApi.reducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(productsApi.middleware),
});
Kode ini membuat toko Redux baru, dengan dua konfigurasi utama:
- 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 keadaan keseluruhan toko.
- 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:
import { useGetAllProductsQuery } from "../features/apiSlice";
import React, { useState } from "react";
import "./product.component.css";export const Data = () => {
const { data, error, isLoading, refetch } = useGetAllProductsQuery();
const [productsData, setProductsData] = useState([]);
const handleDisplayData = () => {
refetch();
setProductsData(data?.products);
};
return (
<div className="product-container">
<button className="product-button" onClick={handleDisplayData}>
Display Data
</button>
{isLoading && <div>Loading...</div>}
{error && <div>Error: {error.message}</div>}
<label className="product-label">Products:</label>
{productsData && productsData.length > 0 && (
<ul>
{productsData.slice(0, 4).map((product) => (
<li className="product-details" key={product.id}>
<p>Name: {product.title}</p>
<p>Description: {product.description}</p>
<p>Price: {product.price}</p>
</li>
))}
</ul>
)}
</div>
);
};
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:
import "./App.css";
import { Data } from "./components/Data";
import { store } from "./store";
import { Provider } from "react-redux";
import { ApiProvider } from "@reduxjs/toolkit/query/react";
import { productsApi } from "./features/apiSlice";function App() {
return (
<Provider store={store}>
<ApiProvider api={productsApi}>
<div className="App">
<Data />
</div>
</ApiProvider>
</Provider>
);
}
export default App;
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.
Artikel Terkait
