State Management Dan Redux

Redux berfungsi Sebagai library yang digunakan untuk manajemen state pada aplikasi JavaScript. Meski sering digunakan bersama React, akan tetapi Redux bersifat framework agnostic, sehingga dapat digunakan dengan atau tanpa framework.

Redux dapat digunakan bersamaan dengan VueJs, Angular, React, ataupun JavaScript murni (Vanilla Javascript). Redux membantu dalam menulis aplikasi yang berperilaku yang konsisten, berjalan di lingkungan yang berbeda (klik, server), dan mudah untuk diuji.

Kenapa Redux?
  1. Dalam project yang besar, biasanya akan terdapat puluhan maupun ratusan Component aplikasi, dan setiap Component memiliki data (State) yang digunakan di banyak Component.
  2. Sudah tentu akan sangat kompleks jika Anda mengirim state langsung dari komponen dan aplikasi atau project yang sedang Anda buat akan sangat sulit untuk dibaca dan diuji.
  3. Dari permasalahan diatas Redux hadir untuk melakukan manajemen state.

Cara Kerja Redux?

State Management Dan Redux
  1. Terdapat 4 actor utama dalam system Redux:
    • Action
    • Store
    • Reducer
    • State
  2. App/UI membuat objek Action dan mengirimnya ke Store.
  3. Oleh Store, objek Action diteruskan ke Reducer yang bertugas melakukan update terhadap State.
  4. Jika ada pembaharuan State maka Store mengirim objek State yang baru ke semua Bagian App/UI yang menjadi subscriber / listener.

Contoh Cara Kerja Redux?
State Management Dan Redux

Contoh: State Tanpa Redux

Buatlah halaman aplikasi seperti gambar disamping. Dimana Ketika touchable “Increase” diklik maka angka yang berada ditengah akan ditambah 1. Demikian Ketika touchable “Decrease” diklik maka angka yang berada ditengah akan dikurangi 1. Gunakan State untuk merubah angka. Pembuatan halaman dapat menggunakan Component function atau class.

State Management Dan Redux

Langkah-Langkah dalam menyelesaikan contoh tersebut:
  1. Buka url https://expo.io/ dan login dengan Account Anda
  2. Setelah masuk dashboard, klik Snack
  3. Klik “New Snack” dengan nama “LatihanTanpaRedux”
  4. Pada file App.js, hapus semua source code yang ada
  5. Pada Snack ketik perintah seperti yang ditampilkan pada slide berikutnya.
  6. Ketiklah perintah berikutState Management Dan ReduxState Management Dan ReduxState Management Dan Redux

Contoh: State Dengan Redux

Buatlah halaman aplikasi seperti gambar disamping. Dimana Ketika touchable “Increase” diklik maka angka yang berada ditengah akan ditambah 1. Demikian Ketika touchable “Decrease” diklik maka angka yang berada ditengah akan dikurangi 1. Gunakan Redux untuk merubah angka. Pembuatan halaman dapat menggunakan Component function atau class.

State Management Dan Redux

Langkah-Langkah dalam menyelesaikan contoh tersebut:
  1. Buka url https://expo.io/ dan login dengan Account Anda
  2. Setelah masuk dashboard, klik Snack
  3. Buka file dengan nama “LatihanTanpaRedux”, lalu ganti nama file tersebut dengan “LatihanRedux”
  4. Buat folder dengan nama “src”
  5. Buat file dengan nama CounterApp.js pada folder “src”
  6. Pada file App.js, copy semua source code yang ada, lalu paste pada file CounterApp.js
  7. Pada file App.js, hapus perintah berikut:State Management Dan Redux
  8. Pada file App.js, hapus perintah berikut:State Management Dan Redux
  9. Pada file App.js, hapus perintah berikut:State Management Dan Redux
  10. Pada file App.js, import file CounterApp.js:State Management Dan Redux
  11. Pada file App.js, tambahkan Component <CounterApp/> pada return(), sehingga hasil akhirnya seperti dibawah ini:State Management Dan Redux
  12. Pada file CounterApp.js, ubah: class App menjadi class CounterApp dan export default App menjadi export default CounterApp
  13. Pada file CounterApp.js, hapus:
  14. Tampilan default CounterApp.js sebelum ditambahkan reduxState Management Dan Redux
  15. Tampilan default CounterApp.js sebelum ditambahkan redux (lanjutan)State Management Dan Redux
  16. Buka file App.js,
    • import createStore:State Management Dan Redux
    • import Provider:State Management Dan Redux
    •  Tambahkan perintah berikut diatas baris class:State Management Dan Redux
    • Tambahkan Component <Provider> pada classState Management Dan Redux
    • import connect:State Management Dan Redux
    • dibawah pada luar class CounterApp, tambahkan:State Management Dan Redux
    • PadaState Management Dan Redux
    • ubah menjadiState Management Dan Redux
    • PadaState Management Dan Redux
    • ubah menjadiState Management Dan Redux
    • PadaState Management Dan Redux
    • ubah menjadiState Management Dan Redux
    • Dibawah function mapStateToProps(state), tambahkan:State Management Dan Redux
    • PadaState Management Dan Redux
    • ubah menjadiState Management Dan Redux
    • Sebagai informasi, component connect harus sudah diimport

Kesimpulan

Redux membantu dalam menulis aplikasi yang berperilaku yang konsisten, berjalan di lingkungan yang berbeda (klik, server), dan mudah untuk diuji.

Sumber Referensi : reactnative.dev