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

Tutorial

Berkenalan dengan FreeBSD – Bagian 6 – Jails

Udah pada tau FreeBSD kan? Yap, sistem operasi open source yang satu ini udah ada sejak tahun 90-an dan masih eksis sampai sekarang. Nah, salah satu fitur keren yang dimiliki FreeBSD adalah Jails. Fitur ini Read more…

Tips & Tricks

OmniOS – Zones

OmniOS tuh pilihan mantap buat platform virtualisasi. Kenapa? Soalnya dia bisa ngedukung virtualisasi OS yang ringan dan juga virtualisasi hardware full pake yang namanya zona. Zona itu kayak versi OmniOS yang di-virtual-in gitu. Dia kerja Read more…

Tutorial

Berkenalan dengan FreeBSD – Bagian 5 – Bhyve

Siapa nih yang masih inget sama VMware? Yap, dulu tuh kalo mau bikin mesin virtual pilihannya ya itu. Tapi sekarang, FreeBSD punya jagoan sendiri lho. Namanya bhyve (dibaca: bi-haiv). Bhyve ini sebenernya project yang dimulai Read more…