Skip to content
Bagas' Hideout

State dan Cara Manajemennya

Teknis2 min read

Sudah sekitar semingguan ini saya mengerjakan course dari freecodecamp terkait Algoritma dan Struktur Data menggunakan JavaScript dan tentang Front-End Libraries.

Ketika mempelajari materi Front-End Libraries, saya menemukan sebuah tools yang baru menurut saya dan mungkin bagi kalian yang sudah lebih dahulu bergelut di dunia per-frontend-an ini adalah tools yang sering kalian gunakan. Tools ini adalah Redux, atau framework jika menurut dokumentasi resminya.

Setelah membaca beberapa modul tentang Redux dan mengerjakan tugas dari modul tersebut, saya merasa sedikit asing dengan cara kerjanya. Atau kalau di kepala saya itu lebih ke "Apa yang diatur/dikelola sama si Redux ini?"

Berdasarkan dokumentasi resminya, Redux ini adalah state management framework atau framework yang digunakan untuk mengelola state. Nah ketemu nih kata kuncinya, yaitu state. Akhirnya saya mencari tau tentang state dan membuat sebuah rough note di notebook saya. Tulisan ini adalah kesimpulan yang saya dapat setelah membaca beberapa sumber dan rough note yang saya buat.

And here's what i found.

So, state ketika di translate ke dalam Bahasa Indonesia artinya adalah keadaan. Yang berarti state adalah keadaan aplikasi saat pengguna melakukan sebuah aksi didalamnya.

Jika menurut beberapa sumber yang saya dapat, state adalah keluaran dari banyak aksi yang dilakukan oleh pengguna sejak halaman di-load atau aplikasi dibuka.

Sebagai contoh, ketika saya menekan tombol login saat tidak ada koneksi internet. Menekan tombol login berarti mengirimkan sebuah HTTP Request ke server, ketika tidak ada koneksi internet maka pengiriman tersebut gagal dan layar akan menampilkan pesan error bahwa login gagal karna tidak dapat terhubung dengan server.

So, what is the action? Tombol login ditekan, mengirim request ke server, kemudian gagal.

Keluarannya apa? Keluarannya adalah pesan error.

Jadi keadaan atau state aplikasi saat itu adalah menampilkan pesan error karna request yang dikirimkan sebelumnya gagal.

Jika dideskripsikan dalam bentuk objek, bentuknya akan jadi seperti ini.

1const state = {
2 error: "Tidak dapat terhubung ke server, login gagal."
3}

Ketika pengguna berinteraksi dengan sebuah aplikasi, interaksi tersebut akan membuat beberapa perubahan pada tampilan atau UI aplikasi, fetching data dari server, menjalankan animasi, membuka sebuah side panel, dan lain-lain.

Setiap interaksi atau perubahan juga akan mengubah keadaan atau state aplikasi tersebut. Mengelola semua perubahan atau keadaan (state) dari aplikasi tersebut membutuhkan sebuah pengelola apalagi ketika sebuah aplikasi berkembang, maka pengelolaan perubahaan atau keadaan aplikasi tersebut kompleksitasnya akan semakin tinggi dan akan semakin sulit untuk dilakukan. Pada saat itulah peran dari state management dibutuhkan.

State Management adalah sebuah metode yang digunakan untuk mengelola state. Metode itu akan membantu kita untuk mengelola state yang berbeda-beda dan selalu berubah setiap waktu.

Ada dua prinsip yang dimiliki oleh metode state management.

Immutability

Prinsip yang pertama adalah Immutability, yang mana kita tidak boleh mutate data atau mendefinisikan ulang data secara langsung tanpa membuat sebuah referensi baru dari data atau objek tersebut.

Jika kita mutating data secara langsung, aplikasi kita akan tidak dapat diprediksi (unpredictable) dan akan sangat sulit untuk tracing ketika terdapat bug didalamnya.

Data yang ada harus dianggap seperti immutable object atau sebuah objek yang tidak dapat dimodifikasi setelah dibuat. Jika kita ingin memodifikasi properti didalamnya, maka yang harus kita lakukan adalah membuat salinan dari objek tersebut dan melakukan modifikasi didalam salinannya.

Unidirectional Data Flow

Prinsip yang kedua adalah Unidirectional Data Flow. Yang dikenal juga dengan nama one-way data flow, yang mana berarti datanya hanyalah satu dan hanya memiliki satu jalan dalam mengirimkan data tersebut ke parts atau bagian yang lain dari sebuah aplikasi.

Hal ini berarti komponen anak (child components) tidak bisa untuk meng-update data yang datang dari komponen induk (parent component).

Itu tadi yang saya dapat ketika mencari definisi dari state dan state management. Jika terdapat hal yang masih membingungkan atau mungkin kamu punya definisi lain tentang state, Pintu DM ku terbuka lebar untuk diskusi.

Kindly, Reach me at telegram if you need to talk with me about it. Have a nice day!