Advertisement
  1. Code
  2. React

Memulai Penggunaan Arsitektur Flux di React

by
Read Time:14 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Pada panduan ini, kamu akan belajar mengenai arsitektur Flux milik Facebook dan cara dia digunakan untuk menangani alur data di aplikasi berbasis React. Kita akan mulai dengan membahas dasar-dasar Flux dan memahami motif dibalik pengembangannya lalu kita akan melatih aoa yang telah kita pelajari dengan membuat sebuah aplikasi dompet virtual sederhana.

Di dalam panduan ini, saya mengasumsikan kamu telah menggunakan React sebelumnya, namun tidak memiliki pengalaman menggunakan Flux. Kamu mungkin mendapatkan sesuatu di luar-nya jika kamu telah mengetahui dasar-dasar Flux dan ingin mendapatkan pemahaman yang lebih dalam.

Jika kamu benar-benar baru dengan React scene, saya rekomendasikan untuk membaca kursus Memulai Penggunaan React oleh David East, di Envato Tuts+. Itu adalah kursus luar biasa yang akan mempersiapkan-mu dengan sangat cepat.

Apa itu Flux?

Flux pada dasarnya adalah sebuah konsep arsitektur aplikasi yang dikembangkan oleh Facebook, namun istilah yang sama juga mengacu pada sebuah pustaka yang mewakilkan implementasi resmi-nya.

Facebook hadir dengan Flux sebagai usaha untuk menyelesaikan masalah yang diakibatkan oleh pola MVC mada codebase raksasa mereka. Mereka berjuang dengan masalah di mana aksi-aksi dipicu pembaharuan yang terus mengalir dan berujung pada hasil yang tidak dapat diprediksi dan kode-nya sulit untuk di-debug. Ini mungkin terdengan familiar jika kamu pernah menggunakan framework MVC sebelumnya, seperti dalam kebanyakan mereka, semua cenderung dipasangkan secara ketat. Tambahkan watchers dan two-way data binding ke mix-nya, dan kamu akan membuat dirimu pusing.

Saran saya adalah menghindari usaha apapun untuk menemukan dasar yang sama antara Flux dan MVC. Dia tidak akan banyak membantu, selain membuatmu bingung. Flux berusaha menyelesaikan hal-hal dengan cara yang berbeda. Berusaha untuk membandingkannya dengan pola lain tidak akan membantu.

Pengaturan Proyek

Jika kamu ingin mengikuti panduan ini, pertama pastikan kamu memiliki software yang dibutuhkan. Setelah selesai, klon cabang boilerplate dari repositori GitHub yang telah saya siapkan untuk menemani artikel ini.

Berikut adalah software yang dibutuhkan dan versi-versi yang telah saya pasang saat menulis artikel ini:

  • Git: 2.11
  • Node.js: 6.9
  • NPM: 3.10
  • Yarn: 0.22
  • Editor Kesukaanmu

Boilerplate-nya hadir sebagai titik awal untuk proyek kecil berikutnya yang akan kita buat, sebuah aplikasi dompet virtual sederhana. Dia berisi konfigurasi Webpack-nya untuk mengubah sintak ES6 menjadi JavaScript dan WDS sederhana untuk menyajikan berkas-berkasnya. Dia juga memiliki beberapa komponen styles CSS sehingga kamu bisa langsung melakukan koding-nya.

Untuk memasang semua dependencies yang dibutuhkan, cd ke direktori proyek dan jalankan yarn.

Pada bagian berikutnya, kamu akan mengatur komponen inti aplikasinya sebelum mengintegrasikan Flux. Saya belum memasukkan mereka ke boilerplate karena saya percaya itu akan membuat lebih banyak kebingungan. Jika kamu tidak tertarik membuat aplikasinya, kamu bisa melewati langkah-langkah ini dan lompat ke bagian berikutnya.

Pengeturan Komponen

Mulai dengan memasukkan kode berikut ke dalam js/index.js yang hadir sebagai titik masuk aplikasi-nya:

Untuk komponen utama <App />, buat sebuah berkas baru di dalam js/components bernama App.js dan tambahkan kode berikut:

Komponen <App /> membungkus dua komponen lainnya, satu untuk formulir yang bertanggung jawab dalam menambahkan item barudan satunya lagi untuk daftar item. Untuk membuat komponen <AddNewItem />, buat sebuah berkas AddNewItem.js di dalam js/components dan tambahkan kode ini:

Komponen-nya membungkus beberapa logika untuk memperbaharui keadaannya ketika formulir diperbaharui dan juga beberapa validasi dasar. Mari selesaikan pengaturan komponen dengan membuat yang terakhir di dalam js/components/ItemList.js untuk daftar item dengan menggunakan kode ini:

Begitulah! Kamu telah selesai mengatur komponen proyek-nya. Bagian bagusnya adalah dia juga hadir dengan gaya bebas.

Jalankan yarn start dan tunggu hingga bundel-nya terbuat. Jika kamu pergi ke localhost:8080 dengan browsermu kamu seharusnya melihat aplikasi-nya tanpa fungsionalitas apapun.

Selanjutnya, kta akan membahas apa itu Flux dan cara kamu bisa menggunakannya untuk menambahkan fungsionalitas ke aplikasi dompet virtualmu.

Blok Bangunan Flux

Pada tingkat yang tinggi, Flux terbagi ke dalam empat bagian utama: actions, dispatcher, stores, dan views:

  • Actions mendeskripsikan sebuah aksi yang terjadidalam aplikasi.
  • The dispatcher adalah sebuah registri tunggal dari callbacks. Dia beraksi sebagai penengah dengan melewatkan aksi-aksi ke semua penyimpanan yang berlangganan padanya.
  • Stores mengatur keadaan dan logika yang dibutuhkan untuk memperbaharui-nya untuk bagian tertentu aplikasinya.
  • Views adalah komponen React sederhana yang sudah kita kenal.

Dalam Flux, semua alur data berada dalam satu arah:

  • Actions dilewarkan ke dispatcher menggunakan class bernama action creators.
  • The dispacther mengirim (is dispacthing) aksi-nya ke semua stores yang berlangganan pada-nya.
  • Pada akhirnya, jika stores-nya peduli mengenai sebuah aksi khusus yang diterima (atau lebih dari satu), mereka memperbaharui dan menandai views-nya sehingga mereka bisa me-render ulang.

Berikut adalah representasi visual dari proses ini.

Representation of how data flows in a Flux applicationRepresentation of how data flows in a Flux applicationRepresentation of how data flows in a Flux application

Aksi

Data dikirim "melalui kabel-nya" dalam satu arah menggunakan objek JavaScript sederhana bernama actions. Tugas mereka adalah untuk mendeskripsikan sebuah event yang terjadi di dalam aplikasi-nya dan untuk mengirim data bar-nya ke stores. Tiap aksi harus memiliki sebuah tipe dan kunci payload opsional yang berisi data-nya. Sebuah aksi terlihat mirip yang berikut ini:

Tipe aksi harus diwakilkan dengan sebuah string uppercase yang deskriptif dan konsisten-mirip dengan konvensi umum dari pendefinisian konstan. Mereka hadir sebagai ID unik yang penyimpanannya akan digunakan untuk mengidentifikasi aksi dan merespon-nya.

Sebuah praktik umum untuk mendefinisikan semua tipe aksi dalam sebuah objek konstan dan referensi ke objek ketimbang ke aplikasi untuk menjaga konsistensi. Dompet virtual kita mendukung satu aksi yang akan menambah item ke dalam daftar-baik beban dan keuntungan finansial akan diperlakukan sebagai sebuah item-sehingga berkas konstan kita akan sangat kurus.

Buat sebuah berkas index.js di dalam js/constants dan gunakan kode berikut untuk membuat tipe aksi pertama-mu.

Aksi akan dilewatkan ke dispatcher menggunakan class pembantu bernama action creators yang menangani tugas sederhana dari pembuatan dan pengiriman aksi-nya ke dispatcher. Sebelum membuat action creator kita, mari lihat apa yang dispatcher lakukan terlebih dahulu dan memahami tugas-nya di dalam Flux.

Dispatcher

Dispatcher digunakan untuk mengordinasikan komunikasi antara action creators dan stores. Kamu bisa menggunakannya untuk mendaftarkan sebuah action handler callback milik store dan juga mengirim aksi ke store yang berlangganan padanya.

API dispatcher sederhana dan hanya memiliki lima metode:

  • register(): Mendaftarkan sebuah action handler callback milik store.
  • unregister(): Menghapus pendaftaran sebuah callback store.
  • waitFor(): Menunggu callback terspesifikasi untuk jalan terlebih dahulu.
  • dispatch(): Mengirim sebuah aksi.
  • isDispatching(): Mengecek jika dispatcher-nya masih mengirim sebuah aksi.

Yang paling penting adalah register() dan dispatch() karena mereka digunakan untuk menangani kebanyakan fungsionalitas inti. Mari lihat penampakkan mereka dan pekerjaan mereka di balik layar.

Tentu saja ini adalah gist dasar. Metode register() menyimpan semua callbacks dalam sebuah array private _callbacks dan dispacth() mengiterasi dan memanggil tiap callback yang disimpun menggunakan aksi yang diterima.

Untuk kesderhanaan, kita tidak akan menulis dispatcher kita sendiri. Namun, kita akan menggunakan satu yang disediakan pustaka Facebook. Saya sarankan kamu mengecek repo GitHub Facebook dan melihat cara dia diimplementasikan.

Di dalam folder js/dispatcher, buat sebuah berkas index.js baru dan tambahkan potongan kode ini:

Dia mengimpor dispatcher dari pustaka flux-yang dipasang sebelumnya menggunakan yarn-lalu mengekspor sebuah contoh baru dari-nya.

Setelah dispatcher-nya siap, kita bisa kembali ke aksi dan mengatur action creator aplikasi kita. Di dalam folder js/actions, buat sebuah berkas baru bernama walletActions.js dan tambahkan kode berikut:

Class WalletActions mengekspos sebuah metode addnewItem() yang menangani tiga tugas dasar:

  • Dia menerima sebuah item sebagai sebuah argumen.
  • Dia menggunakan dispatcher-nya untuk mengirim sebuah aksi dengan tipe aksi ADD_NEW_ITEM yang telah kita buat sebelumnya.
  • Lalu dia mengirim item yang diterima sebagai payload bersama dengan tipe aksi.

Sebelum menggunakan action creator, mari lihat apa itu stores dan cara mereka cocok dengan aplikasi berbasis Flux kita.

Stores

Saya tahu, saya bilang kamu tidak perlu membandingkan Flux dengan pola lainnya, tapi Flux stores pada suatu cara mirip dengan models dalam MVC. Tugas mereka adalah untuk menangani logika dan menyimpan keadaan dari komponen tingkat atas dalam aplikasimu.

Semua Flux stores harus mendefinisikan sebuah metode action handler yang nantikan akan didaftar dengan dispatcher. Fungsi callbact ini pada dasar terdiri dari seuah pernyataan pengalihan dari tipe aksi yang diterima. Jika sebuah aksi spesifik dipenuhi, dia bertindak sesua-nya dan memperbaharui keadaan lokal. Pada akhirnya, store menyiarkan sebuah event untuk menandakan view-nya mengenai pembaharuan keadaan sehingga mereka bisa diperbaharui dengan benar.

Untuk menyiarkan event, stores harus memperluas event logika emiiter. Ada banyak pustaka event emitter yang tersedia, tapi yang paling biasa digunakan adalah event emitter milik Node. Untuk sebuah aplikasi sederhana, kita tidak butuh lebih dari satu store.

Di dalam folder js/stores, buat sebuah berkas baru bernama walletStore.js dan tambahkan kode berikut ke store aplikasi kita.

Kita mulai dengan mgnimpor dependencies yang dibutuhkan untuk store-nya, mulai dengan event emiiter Node, dispatcher lalu diikuti oleh ActionType. Kamu akan menyadari-nya pada berikut ini, ada sebuah konstan CHANGE, mirip dengan jenis aksi yang telah kamu pelajari sebelumnya.

Dia sebenarnya bukan satu, dan itu seharusnya tidak membingungkan. Jika sebuah konstan digunakan untuk memicu event ketika data milik store berubah. Kita akan menjaga-nya di dalam berkas karena dia bukan sebuah nilai yang digunakan pada bagian lain dari aplikasi.

Lalu kita menginisialisasi class WalletStore dengan mulai mendaftarkan callback _registerToAction() dengan dispatcher. Di balik layar, callback ini akan ditambahkan ke array _callback milik dispatcher.

Metode ini memiliki satu penyataan switch di atas jenis aksi yang diterima dari dispatcher ketika sebuah aksi dikirim. Jika dia memenuhi jenis aksi ADD_NEW_ITEM, dia akan menjalankan metode _addNewItem() dan melewatkannya ke payload yang mereka terima.

fungsi _addNewItem mengatur sebuah id untuk item-nya, mendorongnya ke daftar dari item-item yang telah ada, dan meluncurkan event CHANGE. Lalu, metode getAllItems() dan getTotalBudget() adalah pengambil dasr yang akan kita gunakan untuk menerima keadaan store saat itu dan total dana.

Dua metode terakhir, addChangeListener() dan removeChangeListener() yang akan digunakan untuk menyambungkan komponen React ke WalletStore sehingga mereka ternotifikasi ketika data store berubah.

Controller Views

Penggunaan React mengizinkan kita untuk membagi bagian-bagian aplikasi menjadi beberapa komponen. Kita bisa menyarangkan mereka dan membuat hirarki yang menarik dan membentuk elemen-elemen di halaman kita.

Di Fljux, komponen berlokasi di puncak dari mata rantai yang cenderung menyimpan hampir semua logika yang dibutuhkan untuk membuat aksi dan menerima data baru; Sehingga, mereka disebut dengan controller views. Views ini terkait secara langsung ke stores dan mendengarkan perubahan events yang terpicu ketika stores diperbaharui.

Saat ini terjadi, controller views memanggil metode setState, yang memicu metode render() untuk menjalankan dan memperbaharui view dan mengirim data ke anak komponen melalui props. Dari sini, React dan Virtual DOM melakukan sihirnya dan memperbaharui DOM seefisien mungkin.

Aplikasi kita cukup sederhana dan tidak mengikuti peraturan ini. Namun, tergantung dari kerumitan, aplikasi yang lebih besar terkadang memerlukan beberapa controller view dengan sub-komponen tersarang untuk bagian utama dari aplikasi-nya.

Menyatukan Semuanya

Kita telah selesai membahas bagian-bagian utama dari Flux, tapi aplikasi dompet virtual-nya belum selesai. Pada bagian terakhir ini, kita akan mengulas keseluruh alur dari aksi ke view dan mengisi bagian kode yang kosong yang dibutuhkan untuk menjalankan alur data unidirectional Flux yang lengkap.

Mengirim sebuah Aksi

Kembali ke komponen <AddNewItem />, sekarang kamu bisa memasukkan modul WalletActions dan menggunakannya untuk membuat sebuah aksi baru di metode _addNewItem().

Sekarang, ketika sebuah form dikirim, sebuah aksi dikirim dan semua stores-satu dalam kasus kita-akan dinotifikasi mengenai data baru-nya.

Mendengarkan Perubahan Store-mu

Di dalam WalletStore-mu, ketika sebuah item ditambahkan ke daftar kondisi-nya akn berubah dan memicu event CHANGE, meski tidak ada yang mendengarkannya. Mari tutup perulangan dengan menambahkan listener untuk change di dalam komponen <ItemList />.

Komponen yang diperbaharui menutup alur data unidirectional Flux. Ingat bahwa saya melewatkan pemasukkan keseluruhan metode render() untuk memberikan ruang. Mari lihat satu per satu yang baru:

  • Modul WalletStore yang dimasukkan di puncak
  • Keadaan awalnya diperbaharui untuk menggunakan keadaan dari store.
  • Sebuah metode _onChange() baru digunakan untuk memperbaharui keadaan dengan data baru dari store.
  • Menggunakan lifecycle hooks React, callback _onChange() ditambahkan dan dihapus seiring listener change milik store dipanggil kembali

Kesimpulan

Selamat! Kamu telah selesai membuat sebuah dompet virtual yang ditenagai oleh Flux. Kamu telah belajar cara komponen Flux berinteraksi satu sama lain dan cara kamu bisa menambah struktur aplikasi React menggunakannya.

Saat kamu merasa percaya diri dengan kemampuan Flux-mu, pastikan kamu juga mengecek implementasi Flux lainnya seperti Alt, Delorean, Flummox atau Fluxxor dan cari mana yang cocok denganmu.

Beritahu saya pendapatmu di bagian komentar. Saya ingin tahu apa yang pikirkan mengenai Flux dan ingin membantu jika kamu memiliki masalah dengan panduan-nya. Jika kamu suka, kamu juga dapat menghubungi saya di Twitter @hiskio.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.