Skip to main content

Mengapa Aplikasi Kita Membutuhkan Redux?

 

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!

Comments

Popular posts from this blog

Cara Mengatasi Missing Value Pada Dataset

  Ketika kita ingin mengolah data untuk menjadi sebua model machine learning, maka data yang harus disajikan harus bersih dari field field kosong. Biasanya kita akan menjumpai filed field bernilai NaN yang artinya field tersebut kosong atau tak diketahui. Ini sangat berpengaruh hasil model data kita Inilah yang disebut Missing Value. Nilai yang hilang dari beberapa baris dataset Cara Mengetahui Bahwa Dataset Kita Terdapat Missing Value? Cara termudah adalah dengan menggunakan method method yang tersedia oleh package Pandas Dengan Pandas, tak hanya kita bisa mengetahui dataset terdapat Missing Value atau tidak, kita bisa mencari mean, median dan modus, mengisikan data data yang kosong tersebut, dan melihat hasil data tersebut dari beberapa range tertentu Pandas juga bisa membantu kita untuk memeriksa apakah dataset kita memiliki data yang kosong. Tak mungkinkan kita melihat satu persatu ratusan atau ribuan data. Maka dari itu kita membutuhkan method yang dikerjakan oleh python dalam pa

Cara Mengatasi Hang/Freeze Pada Laptop Asus TUF Gaming

  Ada beberapa kendala ketika membeli laptop. Seperti ada aplikasi yang tidak kompaktibel, ada yang hardwarenya crashed, dan bahkan memang harus dibawa ke manufakturnya untuk diktukar karena ada barang yang kita beli adalah miss saat quality control Terlepas dari semua kendala tersebut. Saya akan memberikan sekedar solusi yang bisa menjadi manfaat jika permasalahan itu sama dengan kalian. Yaitu, laptop yang suka freeze, hang, saat kita operasikan Sedikit Cerita Saya belum ada setahun menggunakan laptop Asus varian Tuf Gaming ini. Namun saat beberapa minggu pertama saya mencobanya, ada beberapa kendala yaitu laptop sering hang dan freeze tanpa sebab. Ini terjadi secara tiba tiba. Dan seumpamam saya bawa lagi ke outlet laptop ini berasal, saya gak bisa memberikan alasan yang jelas kenapa laptop ini bisa freeze dan hang. Karena memang terjadi tiba tiba saja.  Hingga beberapa bulan selanjutnya, laptop ini semakin sering hang. Baru beberapa menit dipakai freeze, saya force shut down lewat t

Kupas Tuntas Seputar Agile Dan Contoh Penerapannya

  Startup, perusahaan digital, atau bahkan programmer yang sedang melayani clientnnya untuk mengerjakan sebuah aplikasi memiliki metode.  Metode ini menjadi panduan baku yang kerap digunakan dimananpun dalam pengemabangan produk digital Lebih mudahnya saat kita membangun aplikasi mobile. Kita akan mempelajari bahasa pemograman apa saja yang dibutuhkan, juga serba serbi framework dan tool yang memudahkan segala prosesnya Metode yang baru saja saya ceritakan diatas dinamakan Agile . Sedangkan project yang menerapkan konsep tersebut dinamakan, Agile Project Apa Itu Agile dan Agile Project? Menurut Wikipedia .  Sekumpulan praktek yang bertujuan untuk menaikkan keefeketifan pengembangan suatu aplikasi secara profesional, tim dan terorganisir. Agile melibatkan pengembangan solusi melalui usaha secara kolaboratif dari sifat yang sudah terorganisir, fungsionalitas dan pelanggan Metode ini sangat mengandalkan kolaborasi. Mulai dari para engineer hingga product manager, semuanya harus melalui s