Membuat CRUD Apps menggunakan Redux Toolkit Query Part 1

Sebelum kita beranjak ke pembahasan utama yaitu teknik penulisan pada source code, ada baiknya kita berkenalan dulu dengan “State Management” pada ReactJs yang menjadi dasar dari penulisan tentang topik yang akan kita bahas.

Pada saat awal kita belajar mengenai reactjs tentu kita mengenal dengan apa yang disebut sebagai state. State pada react merupakan sebuah built-in function yang berguna untuk menampung data/informasi yang reactive di dalam sebuah react component dan tentunya value dari state tersebut dapat berubah-ubah. Dalam proses perubahan State tersebut terdapat flow atau alur untuk melakukan perubahan terhadap State, di permulaan kita akan menggunakan hooks useReducer, kemudian jika lebih kompleks lagi maka kita akan menggunakan Context/useContext dalam mengubah atau mendistribusikan value dari sebuah State untuk digunakan oleh component-component yang ada.

Dengan semakin berkembangnya sebuah aplikasi, maka akan semakin banyak juga State yang harus kita declare dan semakin bertambahnya flow yang kita buat, maka keseluruhan State dan flow tersebut harus kita tempatkan pada sebuah wadah/tools yang dapat “memanage” atau mengatur yang akan kita sebut sebagai “State Management”. Terdapat beberapa produk/tools yang bertindak sebagai State Management pada reactjs salah satunya adalah REDUX.

Redux dalam perkembangannya memiliki beberapa jenis/versioning, mulai dari Redux, Redux Toolkit (RTK) dan Redux Toolkit Query (RTK Query). Setiap versi dari redux tersebut tentu memliki spesialisasi tersendiri pemanfaatannya bergantung dengan kebutuhan dari aplikasi yang kita buat, apabila aplikasi yang kita buat sudah “Full Service/API Based”, maka kita disarankan untuk memanfaatkan Redux Toolkit Query.

Pada kesempatan kali ini kita akan coba untuk membuat aplikasi manajemen kontak yang akan kita berikan nama “Contact Apps”. untuk memulainya kita akan melakukan beberapa langkah sebagai berikut:

1. Membuat React Project
2. Instalasi Redux Toolkit Query, Browser Router dan Store Provider
3. Membuat Component, adapun beberapa component yang harus kita buat adalah ContactForm.jsx, HomePage.jsx, dan ContactDetail.jsx kelompokkan file tersebut di dalam sebuah folder “containers”
4. Membuat File RTK Query, buatlah sebuah file rtkQueryContact.js di dalam sebuah folder “services” dengan struktur services/rtkQueryContact. Di dalam file tersebut kita akan membuat sebuah slice/reducer untuk menampilkan data dari API yang kita punya, pada case kali ini kita akan memanfaatkan API yang di consume dari Etter sebagai API Provider. langkah pertama yang kita lakukan adalah mengimport beberapa library yang kita butuhkan

setelah itu kita akan menambahkan reducer/slice nya

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

//API Requirements variable
const token = 'yourtoken'
const appId = 'yourappId'

export const EmployeeApi = createApi({
reducerPath: "EmployeeApi",
baseQuery: fetchBaseQuery({
baseUrl: 'https://io.etter.cloud/v4/',
}),
});

kemudian kita akan membuat sebuah fungsi untuk melakukan GET Data dari API

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

//API Requirements Variable if any
const token = 'yourtoken'
const appId = 'yourappId'

//Slice/Reducer
export const EmployeeApi = createApi({
reducerPath: "EmployeeApi",
baseQuery: fetchBaseQuery({
baseUrl: 'https://io.etter.cloud/v4/',
}),

//API Builder
endpoints: (builder) => ({
//Tuliskan semua fungsi di sini
//1. Get Employee
employee: builder.query({
query: () => `select_all/token/${token}/project/myreactproject/collection/employee/appid/${appId}/employee`,

}),
})
});

Membuat custom hooks untuk masing-masing fungsi pada API Builder agar dapat di gunakan pada components

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

//API Requirements Variable
const token = 'yourtoken'
const appId = 'yuorappId'

//Slice/Reducer 
export const EmployeeApi = createApi({
    reducerPath: "EmployeeApi",
    baseQuery: fetchBaseQuery({
        baseUrl: 'https://io.etter.cloud/v4/',
    }),

    //API Builder
    endpoints: (builder) => ({
        //Tuliskan semua fungsi di sini
        //1. Get Employee
        employee: builder.query({
            query: () => `select_all/token/${token}/project/myreactproject/collection/employee/appid/${appId}/employee`,
            
        }),
    })
});

//Custom Hooks
export const { 
//cara penulisan custom hooks -> use,nama endpoints (camelCase) + tipe Query/Mutation nya
    useEmployeeQuery,
} = EmployeeApi

//Tambahkan EmployeeApi in ke store

5. Membuat Store, store berfungsi untuk mendaftarkan/registrasi file Slice/Reducer yang sudah kita buat. Buatlah file employeeStore.js dan simpan file tersebut ke dalam folder store dengan struktur store/employeeStore.js

import library dan file Slice/Reducer yang sudah kita buat ke dalam store

import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";
//Reducer File
import { EmployeeApi } from "../services/rtkQueryEmployee";

Kemudian kita akan melakukan konfigurasi pada store

import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";
//Reducer File
import { EmployeeApi } from "../services/rtkQueryEmployee";

export const store = configureStore({
    reducer: {
        //Tambahkan nama reducer yang kita buat di sini
        [EmployeeApi.reducerPath]: EmployeeApi.reducer,
    },

    //the middleware
    middleware: (getDefaultMiddleware) => {
        return (
            getDefaultMiddleware().concat(EmployeeApi.middleware)
        )
    }
})

6. Provide Store ke components

agar store tersebut dapat di distribusikan ke components maka store harus di provide menggunakan store provider, pada file index.js tambahkan store provider

import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
//import Components
import HomePage from './containers/HomePage';
import DetailContact from './containers/DetailContact';
import FormContact from './containers/FormContact';

//import store
import { store } from './store/employeeStore';
//import Provider
import { Provider } from 'react-redux';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    // Provide Store  yang sudah kita buat
    <Provider store={store}>
      <BrowserRouter>
        <Routes>
          <Route path='/' element={<HomePage />} />
        </Routes>
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

7. Menampilkan data list employee dari API, pada component HompePage.jsx import hooks yang kita buat pada reducer, kemudian print/tampilkan data list employee menggunakan fungsi map().

import React, { useEffect, useState } from "react";
//import Custom Hooks yang ada di SLice/Reducer
import { useEmployeeQuery } from "../services/rtkQueryEmployee";

//functional Component
const HomePage= () => {
    //menggunakan Hooks useEmployeeQuery
    const { data: contact, isLoading } = useEmployeeQuery()

    return (
        <>
          <ul>
            {contact.map((item) =>(
              <div key={item.id}>
                <li>{item.name}</li>
                <li>{item.email}</li>
              </div>
              )
            )}
              
          </ul>

            
        </>
    )
}

export default HomePage;

Reload halaman Home pada aplikasi kita, kemudian kita dapat melihat list kontak karyawan yang didapat dari API.

Untuk proses Add dan Update dan Delete data dapat kita ulas pada part selanjutnya…