Redux adalah salah satu tools populer yang digunakan untuk mengelola state atau data dalam aplikasi, terutama di aplikasi berbasis JavaScript seperti React. Bagi pemula, konsep Redux mungkin terdengar rumit, tapi sebenarnya sangat bermanfaat untuk membuat aplikasi lebih terstruktur dan mudah dikelola.
Dalam artikel ini, Rumahweb akan membahas tentang apa itu Redux, manfaatnya, dan cara untuk menginstalnya. Yuk, kita pelajari bersama!
Apa Itu Redux?
Redux pertama kali diperkenalkan pada tahun 2015 oleh Dan Abramov dan Andrew Clark. Tools ini dirancang untuk membantu para developer mengelola data (state) dalam aplikasi agar lebih terorganisir.
Secara sederhana, Redux adalah sebuah state management library yang digunakan untuk menyimpan dan mengelola data dalam aplikasi JavaScript. Redux bekerja seperti “pusat penyimpanan data” (store) dan membuat aplikasi menjadi lebih rapi dan mudah diatur, terutama ketika aplikasi tersebut semakin besar dan kompleks.
Untuk mempermudah pemahaman anda, kami akan menggunakan analogi berikut. Bayangkan, Redux seperti loker besar di sekolah yang digunakan oleh semua murid. Setiap murid (komponen aplikasi) dapat menyimpan atau mengambil barang (data) dari loker tersebut, tapi mereka harus mengikuti aturan tertentu, seperti memberikan kunci (action) kepada penjaga loker (reducer).
Dengan cara ini, semua barang tersimpan di satu tempat (store), sehingga lebih mudah diatur dan setiap murid tahu ke mana mereka harus pergi untuk mengambil atau menyimpan sesuatu. Jadi, Redux adalah solusi untuk menjaga alur data dalam aplikasi agar tetap jelas, terorganisir, dan mudah dikelola.
Manfaat
Redux sangat bermanfaat untuk mengelola data (state) dalam aplikasi, terutama jika aplikasi memiliki banyak komponen dan data yang saling terkait.
Dengan Redux, data dapat disimpan di satu tempat (store) sehingga lebih terorganisir, mudah diakses, dan diubah tanpa harus saling “menghubungkan” komponen secara langsung. Ini membuat aplikasi lebih mudah di-manage, mengurangi bug, dan mempermudah developer dalam tracking perubahan data.
Istilah-Istilah dalam Redux
Berikut adalah beberapa istilah penting dalam Redux yang perlu diketahui, beserta penjelasan sederhananya agar mudah dipahami:
1. State
State adalah tempat penyimpanan data di aplikasi. Di Redux, state adalah objek yang menyimpan seluruh data yang dibutuhkan oleh aplikasi.
Contohnya, seperti aplikasi toko online, maka state bisa berisi informasi seperti daftar produk, keranjang belanja, dan data pengguna yang sedang login.
2. Action
Action adalah sebuah objek yang memberitahu Redux apa yang ingin dilakukan atau diubah di state. Selain itu, Action ini seperti “surat perintah” yang berisi informasi tentang perubahan yang akan terjadi.
Contohnya, jika pengguna menambahkan produk ke keranjang, maka action bisa berupa { type: “ADD_TO_CART”, payload: { productId: 1 } }. Di sini, type adalah jenis aksi, dan payload adalah data tambahan yang dibutuhkan.
3. Reducer
Reducer adalah fungsi yang bertugas menerima action dan state sebelumnya, lalu menghasilkan state baru. Dalam fungsinya, reducer tidak boleh mengubah state secara langsung, melainkan menciptakan salinan state baru dengan perubahan yang diminta.
Contohnya, jika ada action “ADD_TO_CART”, reducer akan menambahkan produk ke dalam daftar keranjang tanpa mengubah data original secara langsung.
4. Store
Store adalah tempat utama atau “pusat” yang menyimpan seluruh state aplikasi dan mengelola perubahan state berdasarkan action.
Ilustrasinya, store seperti gudang utama yang menyimpan semua data aplikasi, dan semua komponen aplikasi bisa mengambil atau memperbarui data dari gudang ini.
5. Dispatch
Dispatch adalah cara untuk mengirimkan action ke store agar Redux tahu apa yang harus dilakukan (misalnya, mengubah state).
Contohnya, ketika pengguna menekan tombol “Tambah ke Keranjang”, aplikasi akan “dispatch” action seperti dispatch({ type: “ADD_TO_CART”, payload: { productId: 1 } })
6. Selector
Selector adalah fungsi yang digunakan untuk mengambil data tertentu dari state di store agar komponen aplikasi bisa menggunakannya.
Contohnya, jika aplikasi membutuhkan daftar produk dari state, selector akan mengambil hanya data tersebut tanpa harus mengakses seluruh state.
7. Middleware
Middleware adalah fungsi tambahan yang berjalan di antara action dan reducer. Selain itu, Middleware sering digunakan untuk menangani hal-hal seperti logging, memanggil API, atau mengelola proses asinkron (seperti fetching data dari server).
Contoh middleware populer di Redux adalah redux-thunk yang dapat membantu Anda melakukan proses asinkron, seperti mengambil data dari server sebelum mengubah state.
8. Subscribe
Subscribe adalah cara untuk mendeteksi perubahan state di store. Ketika state berubah, aplikasi dapat “mendengar” perubahan ini dan memperbarui tampilan sesuai data terbaru.
Cara Install Redux di Localhost
Dalam panduan ini, kami akan menginstall redux di localhost komputer yang kami gunakan. Sebelum melakukan instalalasi, pastikan Anda telah menginstall Nodejs dan NPM.
Bagi Anda yang telah menginstall NodeJS dan NPM, Anda bisa melewati step 1 dan 2 pada panduan berikut. Namun, bagi Anda yang belum menginstal NodeJS dan NPM, Anda bisa ikuti panduan berikut:
- Download package Node.Js disini.
- Setelah installer Node.JS terunduh, silahkan run installer dan ikuti instruksi instalasi serta setujui perjanjian lisensinya.
- Restart laptop terlebih dahulu, sebelum menjalankannya. Jika sudah, Anda dapat memeriksa instalasi yang berhasil dengan membuka command prompt/terminal dan gunakan perintah berikut:
–node -v
(untuk pengecekan versi node.js)
–npm –v
(untuk pengecekan versi npm)
- Untuk install redux, cukup jalankan perintah berikut ini di dalam command prompt/terminal dengan perintah:
npm install --save redux
- Kemudian untuk menggunakan Redux dengan aplikasi React, Anda perlu menginstall dependensi tambahan dengan menuliskan perintah berikut:
npm install --save react-redux
- Cek pada direktori C: atau tempat pilihan yang Anda gunakan untuk menyimpan instalasi nodejs dan npm. Jika muncul folder node_modules, tandanya Anda sudah berhasil menginstall redux.
Bagaimana sudah paham bukan tentang apa itu redux, manfaat, istilah dan cara instalasinya? Selamat mencoba!