Cara Menggunakan Rtk

5 min read Aug 02, 2024

Cara Menggunakan RTK Query

RTK Query adalah sebuah library yang membantu Anda untuk membangun aplikasi React dengan cepat dan mudah menggunakan fetching data dengan teknik data fetching dan caching. Library ini membantu Anda untuk:

Membuat request API dengan mudah.
Menangani caching data secara otomatis.
Menampilkan loading state dan error state.
Membuat aplikasi yang lebih responsif.

Berikut adalah langkah-langkah untuk menggunakan RTK Query:

1. Install RTK Query

Anda dapat menginstall RTK Query dengan menggunakan npm atau yarn:

npm install @reduxjs/toolkit @reduxjs/toolkit/query

yarn add @reduxjs/toolkit @reduxjs/toolkit/query

2. Buat API Slice

API slice adalah tempat di mana Anda mendefinisikan semua API endpoint yang akan Anda gunakan. Anda dapat membuat API slice dengan menggunakan fungsi createApi dari RTK Query.

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://api.example.com' }),
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => '/posts',
    }),
  }),
});

export const { useGetPostsQuery } = apiSlice;

reducerPath: Nama reducer yang akan digunakan oleh RTK Query.
baseQuery: Fungsi yang digunakan untuk membuat request API.
endpoints: Object yang mendefinisikan semua API endpoint.
query: Fungsi yang menentukan URL endpoint dan parameter request.

3. Gunakan Hook

RTK Query menyediakan berbagai hook yang dapat Anda gunakan untuk mengakses data API. Salah satu hook yang paling umum digunakan adalah useGetPostsQuery. Hook ini mengembalikan objek yang berisi data API, status request, dan error message.

import { useGetPostsQuery } from './apiSlice';

const App = () => {
  const { data, isLoading, error } = useGetPostsQuery();

  if (isLoading) {
    return Loading...;
  }

  if (error) {
    return Error: {error.message};
  }

  return (
    
      {data.map((post) => (
        {post.title}
      ))}
    
  );
};

data: Data API yang diterima.
isLoading: True jika request API sedang berlangsung, false jika tidak.
error: Error message jika terjadi error.

4. Konfigurasi Redux

Anda perlu menambahkan API slice yang telah Anda buat ke dalam store Redux.

import { configureStore } from '@reduxjs/toolkit';
import { apiSlice } from './apiSlice';

const store = configureStore({
  reducer: {
    [apiSlice.reducerPath]: apiSlice.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(apiSlice.middleware),
});

export default store;

5. Gunakan Store

Anda dapat mengakses data API dan state lainnya melalui store Redux.

import { useSelector, useDispatch } from 'react-redux';

const App = () => {
  const posts = useSelector((state) => state.api.getPosts.data);
  const dispatch = useDispatch();

  return (
    // ...
  );
};

Contoh Penggunaan

Berikut ini contoh penggunaan RTK Query untuk mengambil data posts dari API:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com' }),
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => '/posts',
    }),
  }),
});

export const { useGetPostsQuery } = apiSlice;

// ...

const App = () => {
  const { data, isLoading, error } = useGetPostsQuery();

  if (isLoading) {
    return Loading...;
  }

  if (error) {
    return Error: {error.message};
  }

  return (
    
      {data.map((post) => (
        {post.title}
      ))}
    
  );
};

Kesimpulan

RTK Query adalah library yang sangat membantu untuk membangun aplikasi React dengan fetching data. Library ini membantu Anda untuk membuat request API dengan mudah, menangani caching data secara otomatis, menampilkan loading state dan error state, dan membuat aplikasi yang lebih responsif.

Cara Menggunakan Rtk