Cara Membuat ERD Untuk Aplikasi Web Rental Mobil

 

Bayangkan dalam suatu aplikasi web atau mobile yang sangat besar, dengan begitu banyak komponen, dengan begitu banyak template berisi data data dari API. Mereka harus mengambil data dan merubah data data itu satu persatu.

Memang kelihatannya takkan ada masalah

Saat saya membuat project Indra Movie Database, saya bahkan menganggap mengambil data dari API lalu menyimpannya dalam state takkan mempengaruhi apapun pada aplikasi saya

Indra Movie Database. Cari Film Favoritmu Dalam 1 Klik. Kapapun Dimanapun

 Namun ternyata aplikasi saya masih terlalu sederhana sehingga untuk memasukkan data data hanya sekedar String berisi judul film yang kita inginkan lalu mencarinya pada API, tak cukup untuk membuat aplikasi saya mabuk, error, atau nglag

Sampai sini saya merasa tak perlu membutuhkan sebuah library bernama Redux

Apa Itu Redux?

Menurut artikel yang ditulis oleh Codebucks. 

Satu satunya wadah yang menampung state secara global dan sebuah pola yang spesifik untuk diikuti ketika state diperbaharui

Redux menyelesaikan masalah ketika state yang menyimpan data dari API apapun bisa dari MongoDB, Public API, atau lain sebagainya terlalu banyak sehingga setiap  komponen harus merubah satu persatu. Ini takkan masalah jika aplikasi kita sesederhana project saya. Namun, apabila aplikasi tersebut sangat besar, maka kita membutuhkan Redux untuk menampung state state tersebut secara global sehingga component tak perlu lagi khawatir perubahan state dari komponen komponen yang lain secara hirarki

Illustrasi Dan Gambaran Masalah

Katakanlah dalam sebuah aplikasi kita, terdapat file App.js yang memiliki 3 child-component, lalu component kedua memiliki dua child-component.

Lalu ketika kita mem-fetch data dari API. Data data tersebut dikonsumsi oleh komponen ke-dua, dan di-konsumsi lagi oleh komponen ke-empat dan ke-lima.

Komponen ke-tiga ketika ingin mengkonsumsi state pada component ke-empat pada layer kedua (child-component dari komponen kedua), kita harus mengangkat state tersebut pada parent-component. Ini mungkin bisa berhasil saat aplikasi kita masih sederhana. 

Kita perlu menampung semua state pada container global terlebih dahulu sehingga segala component bisa mengkonsumsi state tersebut tanpa harus memperhatikan hirarkinya lagi

Bagaimana Aplikasi Pada React Bekerja Jika Tanpa Redux

 Contoh ketika kita mengklik tombol Action/Event untuk menambah State 1. Maka State tersebut akan langsung dimunculkan pada View. Ketika kita mengklik lagi tombol tersebut, maka View itu akan diupdate

Lalu, Bagaimana Aplikasi Pada React Bekerja Jika Dengan Redux?

Dalam Redux, terdapat function yang bernama reducer

Reducer menerima dua argument, yang pertama adalah state itu sendiri dan kedua adalah action object

Action object bisa memiliki action seperti menambahkan data atau apapun untuk mengubah state. Semua action object ini tersimpan pada redux store sehingga kita bisa menggunakannya kapanpun dan dimanapun 

Seumpama kita ingin mengubah state, maka UI akan merendernya ulang berdasarkan action object yang kita berikan

Pengertian Redux

Singkatnya, Redux adalah container state yang terprediksi

Atau lebih panjangnya, Redux itu

Centralized. Karena kita tak pernah mengangkat state pada parent-component hanya untuk dimanfaatkan pada component yang lain

Debuggable. Segala aktifitas bisa di-debug menggunakan Redux DevTool sehingga kita bisa mengetahui bagaimana state berubah ubah

Flexible. Karena dengan Redux, state bisa berubah kapanpun

Kesimpulan

Untuk skala yang besar, menggunakan Redux memberikan kemudahan bagi kita untuk mengelola state, sehingga segala kesulita mengkonfigurasi sangat sebanding dengan managemen state yang sudah sangat kompleks. Namun jika aplikasi kita sederhana dan tak banyak state yang diperlukan maka menggunakan Redux bukanlah sebuah keharusan

Cheatsheet & Note proses saya belajar seputar MERN, termasuk Redux. Klik disini!