React Flux Concept

  • Post
    React Flux Concept

     

    Flux adalah arsitektur aplikasi yang digunakan Facebook secara internal untuk membangun aplikasi web sisi klien dengan React. Ini bukan perpustakaan atau kerangka kerja. Ini bukan perpustakaan atau kerangka kerja. Ini adalah jenis arsitektur yang melengkapi React as view dan mengikuti konsep model Unidirectional Data Flow. Ini berguna ketika proyek memiliki data dinamis, dan kami perlu terus memperbarui data dengan cara yang efektif. Ini mengurangi kesalahan runtime.

    Aplikasi Flux memiliki tiga peran utama dalam menangani data:

    1. Dispatcher
    2. Stores
    3. Views (React components)

    Di sini, Anda tidak perlu bingung dengan model Model-View-Controller (MVC). Meskipun, Pengontrol ada di keduanya, tetapi tampilan pengontrol Flux (tampilan) ditemukan di bagian atas hierarki. Itu mengambil data dari penyimpanan dan kemudian meneruskan data ini ke anak-anak mereka. Selain itu, pembuat tindakan – metode pembantu operator yang digunakan untuk menjelaskan semua perubahan yang mungkin dilakukan dalam aplikasi. Ini dapat berguna sebagai bagian keempat dari siklus pembaruan Flux.

    Structure and Data Flow

    Dalam aplikasi Flux, data mengalir dalam satu arah (searah). Aliran data ini penting bagi pola fluks. Dispatcher, store, dan view adalah node independen dengan input dan output. Tindakan adalah objek sederhana yang berisi data baru dan properti tipe. Sekarang, mari kita lihat berbagai komponen arsitektur fluks satu per satu.

    Dispatcher

    Ini adalah hub pusat untuk aplikasi React Flux dan mengelola semua aliran data aplikasi Flux Anda. Ini adalah registri panggilan balik ke toko. Ia tidak memiliki kecerdasan nyata sendiri, dan hanya bertindak sebagai mekanisme untuk mendistribusikan tindakan ke toko. Semua toko mendaftarkan dirinya sendiri dan menyediakan panggilan balik. Ini adalah tempat yang menangani semua peristiwa yang mengubah penyimpanan. Saat pembuat tindakan memberikan tindakan baru kepada petugas operator, semua penyimpanan menerima tindakan itu melalui panggilan balik di registri.

    API dispatcher memiliki lima metode. Ini adalah:

    SNMetodeDeskripsi
    1.register()Ini digunakan untuk mendaftarkan callback penanganan tindakan store’s.
    2.unregister()Ini digunakan untuk membatalkan registrasi callback store’s.
    3.waitFor ()Ini digunakan untuk menunggu callback yang ditentukan dijalankan terlebih dahulu.
    4.dispatch()Ini digunakan untuk mengirimkan tindakan.
    5.isDispatching ()Ini digunakan untuk memeriksa apakah petugas operator sedang mengirimkan tindakan.

    Stores

    Ini terutama berisi status aplikasi dan logika. Ini mirip dengan model di MVC tradisional. Ini digunakan untuk mempertahankan status tertentu dalam aplikasi, memperbarui dirinya sendiri sebagai respons terhadap suatu tindakan, dan memancarkan peristiwa perubahan untuk mengingatkan tampilan pengontrol.

    Tampilan

    Ini juga disebut sebagai tampilan pengontrol. Itu terletak di bagian atas rantai untuk menyimpan logika untuk menghasilkan tindakan dan menerima data baru dari penyimpanan. Ini adalah komponen React yang mendengarkan untuk mengubah peristiwa dan menerima data dari penyimpanan dan merender ulang aplikasi.

    Tindakan

    Metode dispatcher memungkinkan kita memicu pengiriman ke toko dan menyertakan payload data, yang kita sebut tindakan. Ini adalah pembuat tindakan atau metode pembantu yang meneruskan data ke dispatcher.

    Keuntungan Flux

    • Ini adalah model aliran data searah yang mudah dipahami.
    • Ini adalah open source dan lebih merupakan pola desain daripada kerangka kerja formal seperti arsitektur MVC.
    • Aplikasi fluks lebih mudah dirawat.
    • Bagian aplikasi fluks dipisahkan.

     

     

    credit. javatpoint

     

Tagged: 

  • You must be logged in to reply to this topic.