Manajemen State Redux dengan Middleware
Melihat kembali artikel yang pernah saya tulis disini, yang menjelaskan tentang susunan dasar dari redux yang bisa digunakan untuk managemen state pada sebuah aplikasi. Terdapat tiga bagian penting yaitu action, reducer dan store yang masing-masing sudah memiliki fungsi masing-masing untuk melakukan perubahan state pada aplikasi.
Bagian yang digunakan untuk merubah state ada pada bagian reducer, namun pada bagian ini, dijelaskan pada artikel disini, bahwa reducer harus bersifat pure, yang berarti tidak boleh ada sebuah logic yang digunakan di dalamnya. Padahal pada kenyataannya, data yang kita butuhkan harus melalui sebuah proses sebelum digunakan pada sebuah aplikasi.
Masalah di atas bisa kita pecahkan dengan menggunakan sebuah alat yang sudah tidak asing didengar oleh para programmer meskipun seorang pemula seperti saya. Middleware merupakan sebuah alat yang digunakan untuk merubah hasil dari request sebelum masuk menjadi response. Sesuai dengan namanya middle, yang secara umum bisa diartikan diantara. Lebih jelas tentang pengertian middleware bisa kalian lihat pada link ini.
Terdapat beberapa middleware untuk redux, namun untuk artikel ini yang akan saya sertakan adalah redux-saga. Untuk mendapatkan data dari server atau misal menggunakan data dummy, agar tidak mengubah koding dari action, reducer dan store dibutuhkan satu file untuk sumber data dari aplikasi, saya sebut sebagai API.
Berikut saya jabarkan mulai dari awal dari action sampai pembuatan store, dalam pembuatan redux ini saya akan bedakan folder dari setiap bagian:
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Action
Tidak terjadi perubahan cara koding pada action, sehingga akan langsung saya beri contoh file dari ‘actions/action.js’ :
API
Pada file ini merupakan hal yang baru dari artikel sebelumnya. Bagian ini berguna untuk mendapatkan data yang nanti akan digunakan untuk keperluan aplikasi. Pengambilan data dapat dilakukan di dalam file dengan data lokal, juga bisa diambil dari alamat url yang menyediakan data yang dibutuhkan. Berikut contoh dari pengambilan data yang menurut saya paling mudah dicontohkan:
Pada baris pertama terdapat import axios, nah dalam hal ini axios adalah jembatan yang digunakan untuk menjangkau halaman url yang mempunyai data yang dibutuhkan. Untuk lebih jelas tentang axios dan penggunaannya, bisa dilihat pada halaman ini.
Baris kedua sampai baris keenam adalah saya memberikan data pada lokal hanya sebagai contoh. Baris 14 sampai baris 20 adalah pemanggilan data apabila data yang dibutuhkan berada pada lokal komputer anda. Sedangkan pada baris 22 sampai baris 27 terdapat cara pemanggilan data menggunakan url yang memiliki data yang dibutuhkan aplikasi, namun sebelumnya axios harus di create untuk memiliki baseUrl dicontohkan pada baris delapan sampai 12.
Pada pemanggilan data menggunakan url terdapat …action (ini merupakan data pada action atau biasanya adalah parameter atau body yang dibutuhkan oleh alamat url. Pada baris 24 terdapat return value dengan serverAxios.”get” -> merupakan method yang digunakan untuk mendapatkan data. Jangan lupa karena file setiap bagian terpisah, bubuhkan export untuk dapat digunakan di tempat lain pada project.
Saga
Pada bagian ini digunakan untuk melakukan pemanggilan data serta dapat melakukan error handling sehingga saat terjadi error pada saat memanggil data dapat ditangkap serta dapat diberikan kepada user. Penjelasan lebih lengkap tentang saga bisa dilihat pada halaman ini, mungkin untuk saga lebih jelas, menurut saya tidak terlalu jelas, namun tetap harus baca halaman original dong.
Oke setelah mungkin harus jungkir balik memahami saga yang ada di halaman itu (sebenarnya ini pengalaman saya), saya akan memberikan contoh cara penggunaan file saga ini, terdapat dua file yang digunakan, sebenarnya bisa digabung dalam satu file, namun menurut saya akan lebih nikmat dipandang saat menggunakan dua file.
Pada baris pertama terdapat import yang mengambil fungsi put dari redux-saga, fungsi put ini digunakan untuk mengganti atau meletakkan object didalam put pada action. Kemudian pada saga ini membutuhkan action dari app dan juga data yang akan diambil, sehingga pada baris dua dan tiga dilakukan import untuk mengambil action dan api.
Baris lima dalam pembuatan fungsi, jangan lupa membubuhkan tanda * setelah kata function, untuk mengetahui kegunaan dari tanda bintang ini bisa dicari di sini, sedikit bercanda untuk link yang satu ini yaa. Oiya dalam saga ini dimasukkan dalam bagan try — catch yaa agar bisa mengetahui data yang dikembalikan, apabila pengambilan data pada api berhasil maka akan menuju action type pada baris delapan yaitu MENAMPILKAN_DATA_SUCCESS yang akan dihandle pada reducer. Begitu pula saat gagal mengambil data akan dihandle pada MENAMPILKAN_DATA_FAILURE, dan pada kasus saya, tidak mengirimkan data apapun. Kemudian untuk menjadikan data saga yang kita punya, dimasukan pada contoh dibawah:
Pada file ini dibutuhkan action dan saga, sehingga pada baris pertama dan kedua dilakukan import. Kemdian baris ketiga terdapat takeEvery (fungsi ini mirip dengan bind) jadi pada kasus contoh saya yaitu, setiap ada action MENAMPILKAN_DATA_REQUEST, kemudian memanggil saga.data yang akan meneruskan ke SUCCESS atau FAILURE berdasarkan data yang dipanggil pada API.
Reducer
Pada data reducer tidak banyak berubah, hanya memisahkan combineReducer ke file yang berbeda, berikut dua file yang saya buat pada folder reducer:
Perbedaan pada file diatas adalah pada saat melakukan inisialisasi state, yang pada tulisan sebelumnya saya tulis state=[] sekarang telah dibedakan namun tetap digunakan pada hal yang sama. Kemudian disini saya menggunakan fungsi switch karena pada dasarnya pada saat aplikasi berjalan, dia akan melakukan loading, dan akan ada situasi saat sukses dan ada situasi saat error. Pada setiap kondisi terdapat state yang berbeda untuk memberitahukan aplikasi perbedaan dari setiap state, dan message yang bisa diberitahukan kepada user.
Perbedaan pada file ini adalah pada storage, storage disini digunakan untuk menyimpan setiap state yang dilakukan oleh reducer, namun ini baru pendapat saya, ada komentar lain silahkan bisa ditambahkan biar ilmunya bisa bermanfaat bagi orang lain.
Store
Tidak banyak yang berbeda dari file store yang sebelumnya, yang ditambahkan pada file ini adalah sebagai berikut:
Pada baris pertama, terdapat hal baru yaitu applyMiddleware, kemudian pada baris kedua terdapat createSagaMiddleware . Penggunaan dari dua komponen tersebut adalah sebagai berikut. Pertama pada baris tujuh, membuat saga middleware pada variable sagaMiddleware kemudian saat membuat store tidak hanya reducer yang dimasukkan sebagai parameter, namun juga middleware dengan menggunakan komponen applyMiddleware dengan parameter middleware yang tadi sudah dibuat. Kemudian yang berbeda lagi ada pada baris sembilan yang melakukan pemanggilan data saga yang telah dibuat pada folder saga sehingga bisa menghubungkan semua kondisi.
Pada tulisan kali ini mungkin penjelasan dari setiap bagian tidak terlalu jelas, namun itu sudah merangkum semua bagian penting dari setiap part pada aplikasi redux. Apabila saya mendapatkan ilmu yang lebih lagi mengenai penerapan middleware pada redux, tulisan ini akan saya update. Sekian, semoga bermanfaat bagi pada pemula seperti saya.
