Mengenal Apa Itu Redux – apa sih itu redux? lalu, kapan kita harus menggunakan redux? pertanyaan ini akan muncul apabila anda mempelajari bahasa pemrograman javascript lebih lanjut. Redux akan membantu anda dalam mengelola perubahan state yang terjadi didalam aplikasi. Redux sering digunakan bersamaan dengan library reactjs yang saat ini sangat populer digunakan sebaga library javascript di seluruh dunia.
Apa itu state? state adalah data private sebuah component. Data ini hanya tersedia untuk component tersebut dan tidak bisa diakses dari component lain. Anda dapat menggunakan state jika ingin mengolah data yang bersifat internal didalam component itu sendiri.
State merupakan merupakan salah satu fitur unggulan yang ada di library front-end modern saat ini. State biasa digunakan untuk SPA (Single Page Application). Bahkan state ini diterapkan tidak hanya di react saja, tapi di vuejs, flutter, angular, dan kawan-kawannya.
Apa itu Redux?
Redux merupakan salah satu state manajement yang sangat populer digunakan di reactjs. Namun redux sebenarnya berdiri sendiri atau tidak tergantung pada react itu sendiri. Sehingga redux punya state yang bisa dishare diseluruh aplikasi, menggunakan middleware dan masih banyak lagi. Sebenarnya react memilki state manajement sendiri yaitu context, yang akan kita bahas di artikel berikutnya.
Pada dasarnya, terdapat tiga fungsionalitas utama yang ditambahkan oleh redux kedalam aplikasi. Yaitu, tempat untuk menyimpan keseluruhan state aplikasi, mekanisme untuk men-dispatch action kedalam reducer, dan mekanisme untuk memberi tahu setiap kali update state terjadi.
Sehingga secara tidak langsung, ketiga hal tersebut menjelaskan prinsip kerja redux. Dari penjelasan tersebut, dapat disimpulkan bahwa redux menyimpan state aplikasi yang hanya bisa diubah melalui action yang di dispatch kedalam reducer.
Kelebihan menggunakan Redux
Seperti yang kita ketahui bahwa redux dikenal sebagai library untuk mengelola state. Bahkan banyak manfaat yang kita dapat dari paradigma dan arsitektur library ini dan bisa di implementasikan di library atau framework lain. Berikut adalah beberapa kelebihan menggunakan redux.
1. Redux ibarat database di front-end
Redux dikatakan memiliki manfaat untuk menyimpan nilai didalam state parent yang sering diibaratkan sebagai database disisi front-end. Seperti layaknya database, kita dapat juga melakukan operasi database seperti query, filter, insert, dan delete. Jika anda sudah akrab dengan MVC (Model View Controller), maka redux mirip seperti model dan controller. Namun didalam redux bukan menyebutnya dengan database, melainkan store dan hanya ada satu store dalam satu aplikasi yang disebut Single Source of Truth.
2. Redux sebagai tempat bussiness logic
Bussiness logic merupakan sebuah proses validasi, verifikasi, authorisasi, asynchronous dan lain-lain. Pada implementasinya banyak ditempatkan didalam redux. Meskipun tidak wajib tergantung dari jenis aplikasinya.
3. Mudah digunakan dan dipelajari
Redux termasuk salah satu library yang mudah digunakan dan dipelajari. Redux dapat membantu kita dalam mengembangkan aplikasi yang konsisten serta dapat berjalan di lingkungan berbeda client, server, dan native. Redux juga mempermudah dalam melakukan testing maupun pengujian. Selain itu, redux dapat berjalan dalam lapisan UI apapun, serta memiliki lingkungan addons yang besar untuk memenuhi kebutuhan kita.
4. Memanajemen state
Redux memudahkan kita dalam memanajemen state. Pada saat aplikasi sudah bertumbuh besar, kita dapat dengan mudah mengubah state di child-child component tanpa harus membuat bantuan dengan props didalam component didalam props component. Intinya kita bisa mengubah state didalam aplikasi meskipun dari component terjauh dari root component.
Cara instalasi?
Untuk menggunakan redux di projek anda, caranya cukup mudah. Anda bisa menginstalnya secara langsung melalui command line interface (CLI) menggunakan npm maupun yarn sebagai berikut.
[code lang=”js”] # NPM npm install @reduxjs/toolkit # Yarn yarn add @reduxjs/toolkit [/code]Atau, jika anda menggunakan react, anda bisa menggabungkannya secara langsung seperti :
[code lang=”js”] # NPX npx create-react-app my-app –template redux [/code]Kesimpulan dan penutup
Redux akan mempermudah anda dalam mengelola state dimana mengubah state di child-child component tanpa harus membuat bantuan dengan props didalam component didalam props component. Dalam hal ini, redux menggunakan state yang bisa dishare diseluruh aplikasi, menggunakan middleware. Itulah yang dapat caraguna share pada artikel kali ini. Semoga dapat bermanfaat, apabila ada yang ingin disampaikan atau ingin ditanyakan, silahkan komen pada kolom komentar dibawh, terimakasih.
