Redux Adalah : Library JavaScript untuk Mengelola Aplikasi

Last Updated on November 3, 2021 by

Bagi Anda, developer JavaScript, tentunya React Native sudah tidak asing lagi bagi Anda. Namun tahukah Anda saat ini React Native telah berkolaborasi dengan Redux adalah untuk menciptakan back-end?

Artikel ini akan membahas tentang Redux, jika Anda tertarik untuk mengetahui perangkat lunak berbasis JavaScript terbaru ini, simak artikel ini sampai habis.

Pengertian dan Sejarah Redux React

Redux adalah sebuah aplikasi state management. State management adalah cara untuk memfasilitasi komunikasi dan berbagai data lintas komponen. State management menciptakan struktur data yang nyata untuk mewakili keadaan aplikasi Anda yang dapat Anda gunakan untuk membaca dan menulis. Dengan begitu, Anda dapat melihat keadaan sebaliknya yang tidak terlihat saat Anda mengerjakannya.

Sebagian besar library, seperti React dan Angular dibangun agar komponen dapat mengelola statusnya secara internal tanpa memerlukan pustaka atau alat eksternal. Hal ini pun berfungsi dengan baik untuk aplikasi dengan sedikit komponen, tetapi saat aplikasi semakin bertumbuh menjadi besar, mengelola status yang dibagikan di seluruh komponen menjadi tugas.

Di sinilah Redux hadir. Ia berfungsi untuk melakukan perubahan state yang dibutuhkan oleh setiap fungsional yang ada di suatu aplikasi. Redux adalah library JavaScript yang dikhususkan untuk back-end, di mana Redux sendiri telah berkolaborasi dengan React Native. Oleh karena itu beberapa orang menyebutnya sebagai Redux React.

Redux dibuat pada tahun 2015 oleh Dan Abramov dan Andrew Clark. Uniknya, Abramov memulai penulisan implementasi Redux pertama kali saat sedang mempersiapkan konferensi di React Eropa.

Saat ini Redux telah banyak digunakan bersamaan dengan library JavaScript umumnya seperti React dan Angular untuk menciptakan user interface (UI). Arsitekturnya sangat mirip dengan Flux milik Facebook yang mana developer dari Redux sendiri terinspirasi dari Flux.

Komponen Redux dan Cara Kerjanya

Seperti yang sudah diterangkan sebelumnya, Redux memiliki peran untuk melakukan perubahan state yang dibutuhkan oleh setiap fungsional pada aplikasi. Untuk membuat perubahan tersebut, Redux memiliki tiga komponen utama yaitu action, reducer, dan store. Berikut penjelasan dari masing-masing komponen Redux.

1. Action

Action sendiri merupakan suatu event, di mana ia adalah satu-satunya cara Anda dapat mengirim data dari aplikasi Anda ke Redux Store. Data tersebut pun dapat berasal dari interaksi pengguna, panggilan API (API request), atau bisa juga pengiriman formulir. Action ini pun dikirim menggunakan metode ‘store.dispatch ()’.

Action sendiri merupakan objek JavaScript biasa dan harus memiliki tipe properti (property type) untuk menunjukan jenis action yang akan dilakukan. Selain itu, Action harus memiliki muatan yang berisi informasi yang harus dikerjakan oleh action tersebut. Action pun dibuat melakui Action Creator. Berikut ini adalah contoh tindakan yang dapat dilakukan selama login di aplikasi:
{
type: "LOGIN",
payload: {
username: "foo",
password: "bar"
}
}
Kemudian berikut ini adalah contoh dari Action Creator dari kode di atas:
const setLoginStatus = (name, password) => {
return {
type: "LOGIN",
payload: {
username: "foo",
password: "bar"
}
}
}

Perlu diingat, sebagaimana yang telah dijelaskan sebelumnya, Action harus berisikan type property dan kemudian payload atau muatan yang lain pun dapat disimpan.

2. Reducer

Reducer adalah fungsi murni yang mengambil status aplikasi saat ini. Reducer juga berfungsi untuk melakukan tindakan,dan mengembalikan status baru (new state). Status ini disimpan sebagai objek, dan menentukan bagaimana status aplikasi berubah sebagai respons terhadap tindakan yang dikirim ke toko.

Komponen ini didasarkan pada fungsi pengurangan dalam JavaScript, di mana satu nilai dihitung dari beberapa nilai setelah fungsi panggilan balik dijalankan. Berikut adalah contoh cara kerja reduksi di Redux:

const LoginComponent = (state = initialState, action) => {
switch (action.type) {

// Reducer ini menghandle Action dengan “Login”
case "LOGIN":
return state.map(user => {
if (user.username !== action.username) {
return user;
}

if (user.password == action.password) {
return {
...user,
login_status: "LOGGED IN"
}
}
});
default:
return state;
}
};

Sebagai fungsi murni atau fungsi asli, reducer tidak akan mengubah data dalam objek yang diteruskan kepadanya atau melakukan efek samping apapun dalam aplikasi, mengingat objek yang sama, reducer harus selalu menghasilkan hasil yang sama.

3. Store

Store berfungsi untuk menyimpan status aplikasi. Sangat disarankan untuk hanya menyimpan satu store di aplikasi Redux apa pun. Anda dapat mengakses status yang disimpan, mengupdate status, dan mendaftarkan atau membatalkan pendaftaran listener melalui metode helper.

Berikut adalah contoh kode untuk membuat store untuk login di aplikasi yang dibuat:

const store = createStore(LoginComponent);

Action yang dilakukan pada state selalu kembali ke state baru. Dengan demikian, state menjadi sangat mudah dan dapat diprediksi. Sekarang, setelah kita mengetahui lebih banyak tentang Redux, mari kembali ke contoh komponen login yang telah diterapkan sebelumnya dan lihat bagaimana Redux dapat meningkatkan komponen tersebut. Berikut contohnya:

class App extends React.Component {
render() {
return (

)
}
}

Dengan Redux, terdapat satu state umum yang ada di store dan setiap komponennya memiliki akses ke state. Hal ini menghilangkan kebutuhan untuk meneruskan status dari satu komponen ke komponen lainnya secara terus menerus. Anda juga dapat memilih potongan dari toko untuk komponen tertentu; ini membuat aplikasi Anda lebih dioptimalkan.

Keuntungan Menggunakan Redux

Seperti yang sudah dijelaskan sebelumnya, Redux berkolaborasi dengan React, dengan menggunakan Redux React, Anda tidak akan membutuhkan waktu lama untuk meningkatkan state.

Hal ini pun akan memudahkan Anda untuk untuk melacak action atau tindakan mana yang menyebabkan perubahan. Komponen-komponen yang ada pada Redux, tidak perlu menyediakan status atau metode apa pun bagi komponen turunannya untuk berbagi data di antara mereka sendiri.

Semuanya ditangani oleh Redux. Hal ini pun sangat menyederhanakan aplikasi dan membuatnya lebih mudah untuk dipelihara. Selain itu, ada banyak keuntungan lain yang Anda dapat ketika menggunakan Redux.

1. Redux membuat state dapat diprediksi

State selalu dapat diprediksi ketika Anda menggunakan Redux. Jika state dan action yang sama dilewatkan ke reducer, hasil yang sama selalu dihasilkan karena reducer adalah fungsi murni. State di Redux juga tidak berubah dan tidak pernah berubah. Hal ini memungkinkan untuk mengimplementasikan tugas-tugas berat seperti undo dan redo tanpa batas.

Hal ini juga memungkinkan untuk menerapkan perjalanan waktu – yaitu, kemampuan untuk bergerak bolak-balik di antara keadaan sebelumnya dan melihat hasilnya dalam waktu nyata.

2. Redux bersifat maintainable atau dapat dipelihara

Redux tergolong sebagai platform yang ketat dalam mengatur kode. Namun hal ini justru akan memudahkan Anda yang sudah memiliki pengetahuan tentang Redux untuk memahami struktur aplikasi. Hal ini umumnya membuatnya lebih mudah untuk dipelihara.

Kuntungan ini juga membantu Anda memisahkan logika bisnis dari pohon komponen (component tree) Anda.

3. Debugging yang mudah menggunakan Redux

Redux memudahkan debug aplikasi. Dengan mencatat action dan state, maka akan mudah untuk memahami kesalahan pengkodean, kesalahan jaringan, dan bentuk bug lain yang mungkin muncul selama produksi.

Selain pencatatan, ia memiliki DevTools hebat yang memungkinkan Anda melakukan tindakan perjalanan waktu, mempertahankan tindakan saat memuat ulang halaman, dan lain sebagainya. Untuk aplikasi berskala menengah dan besar, debugging membutuhkan lebih banyak waktu daripada benar-benar mengembangkan fitur. Redux DevTools memudahkan untuk memanfaatkan semua yang ditawarkan Redux.

4. Performa yang Baik

Anda mungkin berasumsi bahwa mempertahankan status aplikasi secara global akan mengakibatkan penurunan performa. Redux mengoptimalkan kinerja secara internal sehingga komponen Anda yang terhubung hanya akan dirender saat dibutuhkan.

5. Kemudahan saat melakukan pengujian

Sangat mudah untuk menguji aplikasi Redux karena fungsi digunakan untuk mengubah status fungsi murni.

6. State yang persisten

Anda dapat mempertahankan beberapa state aplikasi ke penyimpanan lokal dan memulihkannya setelah menyegarkan. Hal ini pun sangat bagus karena memudahkan serta membuat pekerjaan Anda lebih efisien.

7. Memungkinkan untuk Rendering Sisi Server

Redux juga dapat digunakan untuk rendering sisi server. Dengan Redux, Anda bisa menangani render awal aplikasi dengan mengirimkan status aplikasi ke server bersama dengan responsnya terhadap permintaan server. Komponen yang diperlukan kemudian dirender dalam HTML dan dikirim ke klien.

Cara Instal Redux

Platform Redux diciptakan untuk membantu developer dalam menulis aplikasi dengan kode-kode secara konsisten. Hasilnya pun dapat dijalankan di lingkungan yang berbeda bisa dari klien (client), server, maupun native.

Selain itu, ini memberikan pengalaman pengembang yang hebat, seperti pengeditan kode langsung yang dikombinasikan dengan debugger perjalanan waktu. Anda dapat menggunakan Redux bersama dengan React, atau dengan pustaka tampilan lainnya. Ini kecil (2kB, termasuk dependensi), tetapi memiliki ekosistem addon yang besar. Jika Anda tertarik untuk menginstal Redux, maka Anda perlu menginstal Redux Toolkit.

Redux Toolkit adalah pendekatan resmi yang rekomendasikan untuk menulis Redux. Redux Toolkit  menyertakan utilitas yang membantu menyederhanakan banyak hal seperti penggunaan umum, termasuk penyiapan penyimpanan, membuat reduksi, dan menulis logika pembaruan yang tidak dapat diubah, dan bahkan membuat seluruh irisan dari berbagai state sekaligus.

Baik Anda pengguna Redux baru yang menyiapkan proyek pertama Anda, atau pengguna berpengalaman yang ingin menyederhanakan aplikasi yang sudah ada, Redux Toolkit dapat membantu Anda membuat kode Redux lebih baik.

Cara install Redux pun sangat mudah dan dapat digunakan di berbagai sistem operasi. Redux Toolkit tersedia sebagai paket di NPM untuk digunakan dengan bundler modul atau dalam aplikasi Node:

# NPM

npm install @reduxjs/toolkit

# Yarn

yarn add @reduxjs/toolkit

Atau selengkapnya Anda dapat lihat di redux.js.org.

Demikianlah penjelasan tentang Redux. Perangkat lunak ini adalah perangkat lunak yang sangat berguna bagi Anda yang ingin mengubah state pada fungsional aplikasi yang telah Anda buat.

Terlebih, Redux berbasis bahasa pemrograman JavaScript, sebuah bahasa pemrograman yang sangat populer sehingga Redux akan sangat cocok untuk Anda yang telah familiar dengan JavaScript.