Messing with ReactJS (finally)
Setelah melewati sprint pertama yang melelahkan karena sebagian besar waktu dihabiskan dengan memperbaiki error, akhirnya saya bisa terjun ke dalam dunia front-end menggunakan ReactJS yang menurut saya lebih berwarna daripada dunia back-end. Dikatakan lebih berwarna karena ketika melakukan pekerjaan di bidang front-end, kita bisa melihat langsung hasil kerja kita dalam bentuk tampilan yang menarik (sesuai dengan apa yang kita kerjakan), sedangkan di bidang back-end hasil kerja kita hanya keluar dalam bentuk JSON atau XML saja, tidak ada tampilan yang menarik mata. Walaupun begitu, tetap saja kedua bidang ini memiliki keunikan dan kesulitannya sendiri-sendiri.
How To: CSS
Hal pertama yang saya lakukan di sprint ini menggunakan ReactJS adalah dengan memperbaiki beberapa pekerjaan sebelumnya yang styling nya dirasa kurang pas atau masih menggunakan teknik brute force. Salah satu teknik brute force yang cukup sering saya lihat adalah menggunakan padding atau margin untuk mengatur posisi dari sebuah element. Hal ini masih cukup baik jika dilakukan untuk menggeser element sedikit saja atau membuat sebuah component yang akan digunakan secara berulang, namun jika pengaturan posisi sudah berada di tahap meletakkan element di tengah element yang cukup besar, penggunaan padding atau margin menurut saya kurang baik. Kasus alignment seperti ini bisa diatasi menggunakan flexbox dan justify-content yang sudah disediakan CSS. Salah satu tool yang sangat membantu dalam kasus-kasus alignment adalah website ini http://howtocenterincss.com/.
Redux 101
Hal lain yang saya lakukan adalah setup Redux. Redux merupakan state container yang menerapkan prinsip immutability, yang artinya state yang ada di dalam Redux tidak bisa diubah. Hal yang bisa dilakukan jika ingin mengubah sebuah value di dalam Redux adalah dengan “menyalin” semua state yang sudah ada sebelumnya, lalu mengubah nilai yang ada di salinan tersebut, lalu mengganti state yang lama dengan state hasil salinan yang sudah diubah isinya.
Action
Menurut website Redux, action adalah payload yang berisi informasi yang mengirimkan data dari view aplikasi ke store. Pada umumnya, action berupa object yang berisi 2 hal, yaitu type dari action tersebut dan payload yang dikirimkan oleh action tersebut.
Berdasarkan contoh di atas, ketika action tersebut di “luncurkan”, sebuah object yang berisi type dan payload akan dikirimkan yang nantinya akan ditangkap oleh store dan dikirimkan ke reducer.
Reducer
Diambil dari website Redux, reducers lah yang akan memberi tahu bagaimana state akan berubah berdasarkan action yang dikirim ke store.
Berdasarkan gambar diatas, jika action yang dikirim ke store adalah action yang memiliki type berupa TOGGLE_MODAL, maka reducer akan mengembalikan state baru yang sudah diubah. State baru inilah yang nanti akan menggantikan state lama yang ada di dalam store.
Store
Redux global state disimpan di sebuah tempat yang bernama store.
Store tercipta dari pemanggilan fungsi createStore yang dapat menerima parameter berupa reducer, state awal app, dan middleware.
Pengaturan awal Redux memang sangat menantang bagi orang-orang yang belum pernah melakukannya, apalagi jika belum memahami sepenuhnya konsep Redux. Diperlukan beberapa trial and error untuk dapat mengatur Redux sampai berhasil dan dapat digunakan sepenuhnya.
Boleh dikatakan bahwa saya bersenang-senang selama mengerjakan sprint kedua ini. Tim yang suportif dan sudah mulai menemukan ritme yang cocok antar satu sama lain juga turut memudahkan berjalannya sprint kedua ini.
