Bikin Reducer Redux Toolkit Jadi Lebih Simpel Pake Immer Bareng Kita

Pernah nggak sih kalian ngerasa pusing tujuh keliling pas lagi asik asik ngoding terus tiba tiba harus berurusan sama nested state di Redux? Kita semua pasti pernah ngerasain momen menyebalkan itu. Rasanya kayak lagi nyoba benerin benang kusut yang nggak ada ujungnya. Belum lagi kalau kita harus jaga prinsip immutability yang bikin kode jadi super panjang karena harus pakai spread operator berkali kali. Tapi tenang aja karena sekarang kita punya kombinasi maut yang bakal bikin hidup jadi jauh lebih gampang yaitu Redux Toolkit bareng Immer. Kita bakal bahas tuntas gimana caranya bikin reducer yang tadinya ribet banget jadi simpel dan enak dibaca.

Dulu sebelum ada Redux Toolkit kita sering banget terjebak dalam pola pikir yang sangat kaku. Kita harus teliti banget mastiin nggak ada bagian dari state yang berubah secara langsung atau mutasi. Masalahnya kalau data kita sudah masuk ke level yang dalam atau nested banget maka urusannya jadi makin kompleks. Kita harus bikin salinan dari tiap level objek cuma buat ganti satu nilai kecil. Kalau kita sampai lupa satu spread operator saja maka aplikasi kita bisa rusak karena referensi objeknya nggak berubah dengan benar. Ini sering banget bikin bug yang susah dilacak atau yang biasa kita sebut sebagai heisenbug.

Nah di sinilah peran besar Immer masuk ke dalam ekosistem pengembangan aplikasi kita. Immer adalah sebuah library kecil yang punya konsep sangat jenius dalam menangani perubahan data. Bayangin kalian punya sebuah draf coretan di kertas sebelum kalian benar benar nulis di buku utama. Kalian bebas coret coret atau hapus apapun di draf itu tanpa perlu takut merusak buku aslinya. Begitu coretan kalian sudah selesai baru deh semua perubahan itu disalin secara otomatis dan rapi ke buku utama. Konsep draf inilah yang dibawa oleh Immer ke dalam dunia JavaScript.

Beruntungnya kita sekarang karena Redux Toolkit sudah mengintegrasikan Immer secara otomatis di dalam fungsinya. Kita nggak perlu lagi instal library tambahan atau pusing mikirin cara konfigurasinya. Saat kita pakai fungsi seperti createSlice atau createReducer dari Redux Toolkit maka secara otomatis kita sudah bisa menikmati keajaiban Immer. Kita bisa nulis kode yang keliatannya kayak ngerubah state secara langsung tapi di balik layar Immer bakal jagain supaya tetap immutable. Ini bener bener pengubah permainan buat kita para pengembang yang pengen kerja cepat dan efisien.

Mari kita bedah lebih dalam kenapa pendekatan ini jauh lebih asik buat kita terapkan. Pertama adalah soal kejelasan kode atau readability. Kalau kita pakai cara lama kode kita bakal penuh sama simbol titik tiga buat spread operator yang bikin mata capek. Tapi dengan bantuan Immer di dalam Redux Toolkit kita cukup panggil propertinya lalu ubah nilainya. Kodenya jadi sangat bersih dan to the point. Siapapun yang baca kode kita nanti bakal langsung paham apa yang sebenarnya sedang terjadi tanpa perlu mikirin logika penyalinan objek yang rumit.

Kedua adalah soal produktivitas kita sebagai developer. Karena kodenya lebih pendek maka waktu yang kita butuhin buat nulis fitur jadi lebih singkat. Kita nggak perlu lagi copy paste potongan kode spread operator yang berulang. Selain itu kemungkinan kita bikin kesalahan penulisan juga jadi jauh lebih kecil. Kita bisa lebih fokus pada logika bisnis aplikasi daripada pusing mikirin cara manipulasi array atau objek yang bertingkat tingkat. Kita jadi punya waktu lebih buat eksplorasi fitur lain atau sekadar ngopi sambil nunggu proses build selesai.

Ketiga yang nggak kalah penting adalah soal keamanan data. Immer memastikan bahwa state lama kita nggak akan pernah berubah sama sekali. Dia bakal bikin state baru berdasarkan perubahan yang kita lakukan pada draf tadi. Ini artinya fitur fitur keren di Redux seperti time travel debugging bakal tetap jalan dengan sempurna. Kita masih bisa ngelihat history perubahan state dengan jelas tanpa ada data yang tercampur aduk. Ini bener bener memberikan kedamaian pikiran buat kita pas lagi debugging aplikasi yang skalanya sudah besar.

Kita juga perlu paham gimana cara kerja di balik layarnya biar nggak cuma sekadar pakai aja. Immer pakai fitur JavaScript yang namanya Proxy. Proxy ini ibarat satpam yang jagain objek kita. Setiap kali kita mencoba buat akses atau ubah nilai di dalam draf tadi si satpam ini bakal mencatat semua gerakan kita. Begitu fungsi reducer kita selesai dieksekusi Immer bakal ambil catatan tadi buat bikin objek baru yang berisi semua perubahan kita tanpa menyentuh objek yang asli sedikitpun. Proses ini sangat cepat dan efisien banget buat sebagian besar kasus penggunaan aplikasi modern.

Mungkin kalian ada yang tanya apakah ini bakal bikin aplikasi kita jadi lambat? Jawabannya adalah nggak sama sekali buat mayoritas skenario penggunaan. Memang ada sedikit overhead karena penggunaan Proxy tadi tapi skalanya sangat kecil kalau dibandingin sama manfaat kemudahan yang kita dapat. Bahkan dalam banyak kasus Immer bisa lebih cepat daripada kalau kita manual melakukan cloning objek yang sangat besar secara sembrono. Jadi kita nggak perlu khawatir soal performa aplikasi kita pas pakai fitur asik ini.

Ada tips menarik buat kita semua pas lagi pakai Immer bareng Redux Toolkit. Meskipun kita bisa langsung mengubah state secara langsung jangan lupa kalau kita juga masih bisa pakai cara return objek baru kalau memang dirasa lebih cocok. Redux Toolkit cukup pintar buat tau kalau kita mengembalikan nilai baru maka dia bakal pakai nilai itu sebagai state yang baru. Tapi ingat ya jangan campur aduk antara mengubah draf dan mengembalikan objek baru dalam satu fungsi reducer yang sama karena itu bakal bikin Redux bingung dan bisa memicu error.

Selain itu kita harus hati hati pas lagi berurusan sama array. Immer bikin manipulasi array jadi jauh lebih menyenangkan. Kita bisa pakai fungsi seperti push atau splice yang biasanya dilarang keras di Redux tradisional. Sekarang kita bisa langsung dorong data baru ke dalam array state tanpa perlu bikin variabel sementara buat nampung salinan array tersebut. Ini bikin logika buat fitur seperti keranjang belanja atau daftar pesan jadi jauh lebih intuitif buat ditulis dan dipelihara dalam jangka panjang.

Penggunaan Immer di dalam Redux Toolkit juga sangat membantu saat kita harus berurusan sama data dari API yang strukturnya sering kali nggak ideal. Kadang kita dapat data yang sangat dalam hirarkinya dan kita cuma mau update satu status kecil di ujung sana. Tanpa Immer kita mungkin bakal butuh lima sampai enam baris kode cuma buat update satu boolean. Tapi sekarang kita tinggal akses jalurnya saja sampai ke ujung lalu ganti nilainya. Benar benar sesimpel itu dan bikin pengalaman ngoding kita jadi jauh lebih menyenangkan.

Kita juga harus ingat kalau asiknya pakai Redux Toolkit itu bukan cuma soal Immer saja. Kombinasi antara struktur slice yang rapi dengan kemudahan manipulasi state bikin tim kita jadi punya standar kode yang sama. Nggak ada lagi perdebatan soal gimana cara terbaik buat update nested state karena semua sudah standarisasi pakai pola yang disediakan Redux Toolkit. Ini penting banget buat kolaborasi dalam tim supaya nggak ada kodingan yang aneh aneh atau sulit dimengerti sama anggota tim yang lain.

Sebagai penutup kita harus mulai membiasakan diri buat memanfaatkan semua fitur modern ini. Dunia teknologi berkembang sangat cepat dan kita sebagai pengembang harus terus adaptasi sama cara cara baru yang lebih efisien. Pakai Immer bareng Redux Toolkit bukan cuma soal ikut ikutan tren tapi soal gimana kita menghargai waktu dan energi kita sendiri buat fokus pada hal hal yang lebih krusial di aplikasi kita. Jadi jangan ragu lagi buat langsung cobain dan rasain sendiri betapa ringannya beban kerja kita pas bikin reducer nanti.

Semoga artikel ini bisa kasih pencerahan buat kalian yang selama ini masih merasa terbebani sama urusan state management di Redux. Mari kita bikin kode kita jadi lebih bersih lebih asik dan tentunya lebih mudah buat dirawat. Selamat mencoba dan teruslah bereksperimen dengan teknologi teknologi baru yang memudahkan hidup kita sebagai pengembang perangkat lunak. Sampai jumpa di pembahasan asik lainnya bareng kita semua di sini. Tetap semangat ngoding dan jangan lupa buat terus berbagi ilmu sama teman teman yang lain ya.