Menggunakan Zustand untuk membuat state management

Apa itu state management

State management adalah sebuah cara untuk mengelola state pada aplikasi kita, state management ini biasanya digunakan pada aplikasi yang memiliki state yang kompleks, seperti aplikasi yang memiliki banyak komponen yang saling berhubungan, atau aplikasi yang memiliki banyak state yang saling berhubungan.

biasanya state management ini digunakan pada aplikasi yang menggunakan framework seperti react, vue, angular, dll. karena pada framework tersebut, state management ini tidak disediakan secara default, sehingga kita harus menggunakan library pihak ketiga untuk mengelola state pada aplikasi kita.

Mengapa kita perlu menggunakan state management

Ketika kita membuat aplikasi yang memiliki state yang kompleks, maka kita akan kesulitan untuk mengelola state tersebut, karena kita harus memikirkan bagaimana cara mengupdate state tersebut, bagaimana cara mengambil state tersebut, bagaimana cara menghapus state tersebut, dan lain sebagainya. sehingga kita akan kesulitan untuk mengelola state tersebut.

Apa itu Zustand

Zustand adalah sebuah library state management sederhana yang dapat di gunakan dengan cepat dan mudah, zustand ini memiliki fitur yang lengkap, sehingga kita dapat mengelola state dengan mudah. zustand ini juga memiliki performa yang sangat cepat, sehingga cocok untuk digunakan pada aplikasi yang memiliki state yang kompleks. zustand ini juga sangat mudah untuk di gunakan, sehingga cocok untuk digunakan oleh pemula.

Cara menggunakan Zustand

Instalasi

Untuk menggunakan zustand, kita harus menginstall library zustand terlebih dahulu, kita dapat menginstall library zustand dengan cara berikut:

npm install zustand

Membuat store

Setelah kita menginstall library zustand, kita dapat membuat store dengan cara berikut:

buatlah file dengan nama useLoginStore.ts pada folder src/stores, lalu tambahkan kode berikut:

import { create } from 'zustand'
import { devtools, persist } from 'zustand/middleware'

interface LoginState {
    userData: { [x: string]: any } | null,
    dataFetched: boolean,
    setUser: (userData: { [x: string]: any }) => void
    fetchUser: (axiosInstance: any) => void
    logout: () => void
}

export const useLoginStore = create<LoginState>()(
    devtools(
        persist(
            (set) => ({
                userData: {},
                setUser: (userData) => set(() => ({ userData })),
                fetchUser: async (axiosInstance: any) => {

                    const url = `/api/auth/info`;
                    const opsResponse = await axiosInstance.post(url);
                    try {
                        

                        const data = opsResponse.data.data;
                        return set({ userData: await data, dataFetched: true })
                    } catch (error) {
                        
                        return set({ userData:null, dataFetched: true })
                    }

                },
                logout: () => set(() => ({ userData: {}, dataFetched: true })),
                dataFetched: false,
            }),
            {
                name: 'user-storage',
            }
        )
    )
)

pada contoh di atas, kita membuat store dengan nama useLoginStore, pada store tersebut kita membuat state userData yang berisi data user, lalu kita membuat action setUser yang berfungsi untuk mengupdate state userData, lalu kita membuat action fetchUser yang berfungsi untuk mengambil data user dari server, lalu kita membuat action logout yang berfungsi untuk menghapus data user, lalu kita membuat state dataFetched yang berfungsi untuk menandakan apakah data user sudah diambil atau belum.

pada contoh di atas, kita juga menggunakan middleware devtools dan persist, devtools berfungsi untuk menampilkan state pada devtools, dan persist berfungsi untuk menyimpan state pada localstorage.

Menggunakan store

Setelah kita membuat store, kita dapat menggunakan store tersebut dengan cara berikut:

import { useLoginStore } from 'src/stores/useLoginStore' // import store


const { userData, setUser, logout } = useLoginStore() // gunakan store

pada contoh di atas, kita mengimport store useLoginStore yang telah kita buat sebelumnya, lalu kita menggunakan store tersebut dengan cara memanggil store tersebut. pada contoh di atas, kita memanggil state userData, dan action setUser dan logout dari store tersebut.

Memangambil user data

pada fungsi fetchUser, kita dapat mengambil data user dengan cara berikut:

import { useLoginStore } from 'src/stores/useLoginStore' // import store


const { userData, setUser, logout, fetchUser } = useLoginStore() // gunakan store

fetchUser(axiosInstance) // ambil data user

pada contoh di atas, kita mengambil data user dengan cara memanggil action fetchUser dari store tersebut.

Mengupdate state

Setelah kita menggunakan store, kita dapat mengupdate state dari store tersebut dengan cara berikut:

import { useLoginStore } from 'src/stores/useLoginStore' // import store


const { userData, setUser, logout } = useLoginStore() // gunakan store

setUser({ name: 'John Doe' }) // update state

pada contoh di atas, kita mengupdate state userData dengan cara memanggil action setUser dari store tersebut.

Menghapus state

Setelah kita menggunakan store, kita dapat menghapus state dari store tersebut dengan cara berikut:

import { useLoginStore } from 'src/stores/useLoginStore' // import store


const { userData, setUser, logout } = useLoginStore() // gunakan store

logout() // hapus state

pada contoh di atas, kita menghapus state userData dengan cara memanggil action logout dari store tersebut.

Mengambil Data User

Setelah kita menggunakan store, kita dapat mengambil data user dari store tersebut dengan cara berikut:

import { useLoginStore } from 'src/stores/useLoginStore' // import store


const { userData, setUser, logout } = useLoginStore() // gunakan store

console.log(userData) // ambil data user