Weekly Progress 2 — Registration Page
Refactor Registration Page
Pada minggu sebelumnya, saya membuat halaman registrasi beserta validasi input. Di minggu kedua ini, saya melakukan integrasi halaman registrasi dengan server backend.
Saya juga melakukan perubahan pada halaman registrasi dari segi struktur kode dan desain. Dari segi desain, yaitu itu tampilan tatap muka, disesuaikan dengan high fidelity mockup yang telah ada, proses desain tersebut dibantu Hipster saya mbak Intan. :)
Untuk struktur code, saya membaginya menjadi beberapa file, mengikuti panduan yang disediakan pada boilerplate yang digunakan.
Untuk membuat halaman register beserta interaksinya secara utuh, beberapa bagian yang digunakan antara lain:
action.js : berisi fungsi yang digunakan untuk mengirimkan data ke store.
constants.js : berisi konstanta
index.js : merender tampilan halaman register, menghandle submisi form
reducer.js : reducer untuk halaman register, yang mendeskripsikan bagaimana state berubah berdasarkan action yang diterima.
saga.js : berisi fungsi-fungsi untuk memanggil api / asynchrounous task yang akan digunakan pada halaman register.
selectors.js : helper untuk melakukan selection dan transform pada state di halaman register.
Conneting with backend Api
Selain itu, saya juga melakukan integrasi dengan backend untuk dapat mengirim data registrasi ke server dan membuat user baru. Pertama, user akan melakukan submit form dengan input yang telah tervalidasi dan memanggil action registerRequest
pemanggilan registerRequest akan mengirimkan action bertipe REGISTER_REQUEST serta form data dari user kepada dispatcher untuk diteruskan kepada reducer.
Reducer akan menerima payload dan mengubah state tersebut berdasarkan action yang diterima kemudian dikirimkan ke store.
Setelah itu, pada file saga.js, terdapat sebuah watcher yang akan mendeteksi dispatch sebuah action bertipe REGISTER_REQUEST yang dihasilkan dari pemanggilan registerRequest, kemudian dibuat sebuah asychrounous call untuk mengirimkan request ke server.
Integrasi yang saya lakukan adalah mengirim request beserta data pada field form registrasi ke server dan menerima balikan. Apabila user berhasil dibuat maka secara otomatis akan berpindah ke halaman login, sebaliknya jika gagal maka akan ditampilkan pesan error.
What I learn
- generator function di javascript
- action →reducer →saga
What I will do next
- membuat halaman upload file
