Create and Update Data menggunakan Redux Toolkit Query(RTK Query) Part 2

Published by Agung Handoko on

Pada part sebelumnya kita sudah membahas bagaimana redux bekerja dan sudah menyelesaikan cara mendapatkan data/GET Data dari sebuah API.

kali ini kita akan mempelajari bagaimana melakukan CREATE dan Update sebuah data dengan menggunakan Redux Toolkit Query. Langkah yang perlu kita lakukan adalah membuat sebuah react component yang berisi sebuah form

  1. Form Components

Buatlah sebuah component

import React, { useState } from "react";
import {useNavigate } from "react-router-dom";

const FormContact = () => {

return(
  <> 
  <div>
    <input type="text" value="" onchange={} />
    <input type="text" value="" onchange={} />
    <input type="text" value="" onchange={} />
  </div>
  
  </>
)

}
export const FormContact;

2. Membuat state untuk menampung hasil inputan pada form

import React, { useState } from "react";
import {useNavigate } from "react-router-dom";

const FormContact = () => {

//declare semua state di sini
const [name, setName] = useState("")
const [address, setAddress] = useState("")
const [email, setEmail] = useState("")

return(
  <> 
  <div>
    <input type="text" value={name} onchange={} />
    <input type="text" value={address} onchange={} />
    <input type="text" value={email} onchange={} />
  </div>
  <div>
    <button onCLick={}>Submit</button>
  </div>
  
  </>
)

}
export const FormContact;

3. Membuat fungsi untuk melakukan handling saat state berubah

import React, { useState } from "react";
import {useNavigate } from "react-router-dom";

const FormContact = () => {

//declare semua state di sini
const [name, setName] = useState("")
const [address, setAddress] = useState("")
const [email, setEmail] = useState("")

//function handler
const fnInsertName = (event) => {
        setName(event.target.value)
    }

const fnInsertEmail = (event) => {
        setEmail(event.target.value)
    }

const fnInsertAddress = (event) => {
        setAddress(event.target.value)
    }

return(
  <> 
  <div>
    <input type="text" value={name} onchange={fnInsertName} />
    <input type="text" value={address} onchange={fnInsertEmail} />
    <input type="text" value={email} onchange={fnInsertAddress} />
  </div>
  <div>
    <button onCLick={}>Submit</button>
  </div>
  
  </>
)

}
export const FormContact;

pada fungsi tersebut melakukan handle pada saat value berubah, maka setter (setName, setEmail) akan melakukan update terhadap state sesuai value terbaru

4. Rtk-query Post Data

untuk melakukan submit form kita perlu menambahkan fungsi pada API Builder yang ada di file redux yang sudah kita buat sebelumnya

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 Contacts
        employee: builder.query({
            query: () => `select_all/token/${token}/project/myreactproject/collection/employee/appid/${appId}/employee`,
            
        }),
        //2. Create Contact
        addEmployee: builder.mutation({
            query:({insertContactData}) => ({
                    url: 'https://io.etter.cloud/v4/insert/employee',
                    method: 'POST',
                    body: insertContactData,
        }),
        
        })
    })
});

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

dapat kita lihat pada file rtk-query tersebut terdapat 2 jenis builder yaitu “query” dan “mutation”. Lalu bagaimana perbedaan penggunaannya ? tipe “query” dapat kita gunakan untuk melakukan aksi GET data/read data dari API, dan apabila kita melakukan perubahan terhadap data maka kita menggunakan tipe “mutation” seperti padaa saat post dan update data.

Setelah selesai membuat fungsi untuk melakukan post data pada file rtk-query, selanjutnya adalah membuat custom hooks “useAddEmployeeMutation” kemudian import hooks tersebut ke dalam component.

Import Custom Hooks (useaAddEmployeeMutation) pada Component lalu gunakan hooks tersebut

import React, { useState } from "react";
import {useNavigate } from "react-router-dom";
//import custom hooks nya
import { useAddNewEmployeeMutation } from "../services/rtkQueryEmployee";

const FormContact = () => {
//gunakan custom hooks
const [dispatchAddContactMutation] = useAddNewEmployeeMutation()

//declare semua state di sini
const [name, setName] = useState("")
const [address, setAddress] = useState("")
const [email, setEmail] = useState("")

//function handler
const fnInsertName = (event) => {
        setName(event.target.value)
    }

const fnInsertEmail = (event) => {
        setEmail(event.target.value)
    }

const fnInsertAddress = (event) => {
        setAddress(event.target.value)
    }

return(
  <> 
  <div>
    <input type="text" value={name} onchange={fnInsertName} />
    <input type="text" value={address} onchange={fnInsertEmail} />
    <input type="text" value={email} onchange={fnInsertAddress} />
  </div>
  <div>
    <button onCLick={}>Submit</button>
  </div>
  
  </>
)

}
export const FormContact;

5. Fungsi Submit Form

setelah melakukan import custom hooks, kita akan membuat function yang akan melakukan handling saat button submit ditekan. pada fungsi tersebut kita akan menggabungkan seluruh state yang ada dan menampung state tersebut dengan variabel “insertContactData”

import React, { useState } from "react";
import {useNavigate } from "react-router-dom";
//import custom hooks nya
import { useAddNewEmployeeMutation } from "../services/rtkQueryEmployee";

const FormContact = () => {
//gunakan custom hooks
const [dispatchAddContactMutation] = useAddNewEmployeeMutation()

//declare semua state di sini
const [name, setName] = useState("")
const [address, setAddress] = useState("")
const [email, setEmail] = useState("")

//function handler
const fnInsertName = (event) => {
        setName(event.target.value)
    }

const fnInsertEmail = (event) => {
        setEmail(event.target.value)
    }

const fnInsertAddress = (event) => {
        setAddress(event.target.value)
    }
//fungsi submit form
const fnInsertContact = () => {
        const insertContactData = {
            "name": name,
            "address": address,
            "email": email,
        }
 //dispatch hooks
        dispatchAddContactMutation({insertContactData})

}

return(
  <> 
  <div>
    <input type="text" value={name} onchange={fnInsertName} />
    <input type="text" value={address} onchange={fnInsertEmail} />
    <input type="text" value={email} onchange={fnInsertAddress} />
  </div>
  <div>
    <button onCLick={fnInsertContact}>Submit</button>
  </div>
  
  </>
)

}
export const FormContact;

pada bagian //dispatch hook, kita memanggil “dispatchAddContactMutation” dan memasukkan data yang baru ke dalamnya. Pada langkah ini kita sudah berhasil melakukan create data baru.

Update Contact

untuk melakukan update contact cara yang dilakukan hampir sama seperti melakukan create contact, yaitu kita akan menambahkan fungsi baru pada api builder, membuat custom hooks dan memanggil hooks tersebut ke dalam komponen.

agar lebih jelasnya dapat kita simak pada source code berikut:

  1. Pada file redux tambahkan fungsi update data
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 Contacts
        employee: builder.query({
            query: () => `select_all/token/${token}/project/myreactproject/collection/employee/appid/${appId}/employee`,
            
        }),
        //2. Create Contact
        addEmployee: builder.mutation({
            query:({insertContactData}) => ({
                    url: 'https://io.etter.cloud/v4/insert/employee',
                    method: 'POST',
                    body: insertContactData,
        }),
        //3. Update Contact
        updateEmployee: builder.mutation({
                query: ({ UpdateData }) => ({
                url: 'https://io.etter.cloud/v4/update_id/employee',
                method: 'POST',
                body: UpdateData,
            })
            
        }),
        
        })
    })
});

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

2. Buat Component baru dengan nama updateContact.jsx

kita dapat melakukan copy-paste dari component form yang sudah kita buat dan mengganti nama component dan fungsi submitnya sehingga terlihat seperti berikut

import React, { useState } from "react";
import {useNavigate } from "react-router-dom";
//import custom hooks nya
import { useUpdateEmployeeMutation } from "../services/rtkQueryEmployee";

const UpdateContact = () => {
//gunakan custom hooks
const [dispatchUpdateContactMutation] = useUpdateEmployeeMutation()

//declare semua state di sini
const [name, setName] = useState("")
const [address, setAddress] = useState("")
const [email, setEmail] = useState("")

//function handler
const fnInsertName = (event) => {
        setName(event.target.value)
    }

const fnInsertEmail = (event) => {
        setEmail(event.target.value)
    }

const fnInsertAddress = (event) => {
        setAddress(event.target.value)
    }
//fungsi submit form
const fnUpdateContact = () => {
        const insertContactData = {
            "name": name,
            "address": address,
            "email": email,
        }
 //dispatch hooks
        dispatchUpdateContactMutation({insertContactData})

}

return(
  <> 
  <div>
    <input type="text" value={name} onchange={fnInsertName} />
    <input type="text" value={address} onchange={fnInsertEmail} />
    <input type="text" value={email} onchange={fnInsertAddress} />
  </div>
  <div>
    <button onCLick={fnUpdateContact}>Submit</button>
  </div>
  
  </>
)

}
export const FormContact;

Pada tahap ini kita sudah berhasil untuk melakukan update data. untuk melakukan delete data dan search data akan kita bahas pada part selanjutnya…

Categories: Sharing SessionTips & TricksTutorial

Related Posts

Tips & Tricks

Sertifikat Kubernetes Ekspire? Tidak masalah

Ternyata telah genap satu tahun lamanya salah satu Kubernetes kami berumur. Cluster ini kami gunakan sebagai tempat melakukan pengembangan produk berbasis Microservice kami. Selama ini sih tidak ada kendala ya, namun siang ini saya dapat Read more…

Tips & Tricks

Mengenal Expo EAS Build: Mempermudah Proses Build Aplikasi React Native

Pada era pengembangan perangkat lunak saat ini, cepatnya perkembangan teknologi mobile telah mendorong pengembang untuk mencari solusi yang lebih efisien dan cepat. Expo EAS Build menjadi salah satu jawaban untuk mempermudah proses build aplikasi React Read more…

Tips & Tricks

Intermitent error 502 pada service kubernetes

Dalam perjalanan kami membangun produk berbasis microservice ini sungguh kami sangat banyak belajar. Untuk produk yang satu ini kami memutuskan untuk menggunakan Kubernetes sebagai alat orkestrasi service-service yang ada. Sangat menyenangkan tentunya belajar hal baru, Read more…