Memahami pola Flux


12

Saya sebenarnya mempelajari pola fluks dan ada sesuatu yang saya tidak mengerti tentang toko .

Apa sebenarnya mereka?

Saya telah membaca banyak artikel, dan sepertinya itu menyangkut domain.

Apakah ini berarti bahwa ini adalah bagian "abstrak" yang terkait dengan panggilan api atau panggilan backend?

Tidak begitu jelas bagi saya.

Sunting: Mungkinkah itu sama dengan pabrik bersudut? Mengambil data jarak jauh, membuat tugas bisnis atau menyimpan beberapa status aplikasi (misalnya pengguna saat ini terhubung)?


1
Tautan ke apa yang Anda bicarakan akan sangat membantu. Apakah maksud Anda "pola fluks" ini? fluxxor.com/what-is-flux.html
DougM


Flux tidak lebih dari pola mempublikasikan / berlangganan dengan batasan bahwa semua data harus melalui operator terlebih dahulu. Ini menjamin data tidak mundur (dan menyebabkan kebingungan). Hal-hal seperti "Store", "Action" dll hanyalah cara lain untuk mengatakan Komponen sistem, dan Data yang akan diedarkan.
kiwicomb123

Jawaban:


23

Baiklah saya jelaskan dari Langkah demi Langkah

1 Apa itu Fluks?

  • Sebuah pola
  • Dispatcher terpusat
  • Aliran data searah
  • Daftar barang

Mereka menyebutnya Flux karena suatu alasan juga.

Implementasi Fluks

  • Fluks Facebook
  • Alt
  • Surutnya
  • Membingungkan
  • Nuklir
  • Fluks

masukkan deskripsi gambar di sini

Obrolan dengan Flux

Bereaksi : Hey Action, seseorang mengklik tombol "Save Course" ini.

Tindakan : Terima Kasih Bereaksi! Saya mendaftarkan pembuat tindakan dengan operator, sehingga operator harus berhati-hati memberi tahu semua toko yang peduli.

Dispatcher : Biarkan saya melihat siapa yang peduli dengan kursus yang diselamatkan. Ah! Sepertinya Store telah mendaftarkan panggilan balik ke saya, jadi saya akan memberi tahu dia.

Toko : Hai operator! Terima kasih atas pembaruannya! Saya akan memperbarui data saya dengan muatan yang Anda kirim. Lalu aku akan memancarkan acara untuk komponen Bereaksi yang peduli.

Bereaksi : Ooo! Shiny data baru dari toko! Saya akan memperbarui UI untuk mencerminkan ini!


API fluks


register (function callback) - “Hai operator, jalankan saya ketika ada tindakan. -Toko"

batalkan pendaftaran (string id) - “Hai operator, berhentilah khawatir tentang tindakan ini. -Toko"

waitFor (id array) - “Perbarui toko ini terlebih dahulu. -Toko"

dispatch (payload objek) - “Hei dispatcher, beri tahu toko tentang tindakan ini. -Tindakan"

isDispatching () - "Saya sibuk mengirimkan panggilan balik sekarang."

jadi pertanyaan yang muncul di benak kita adalah

Jadi Flux Adalah Model Publikasikan-Berlangganan?

Tidak terlalu.

Berbeda dalam dua cara:

1.Setiap muatan dikirim ke semua panggilan balik yang terdaftar.

2.Callback dapat menunggu panggilan balik lainnya

Ringkasan

Fluks adalah pola aliran data searah. Tindakan mengenkapsulasi peristiwa Dispatcher adalah hub pusat yang menahan panggilan balik. Toko menyimpan status aplikasi. Banyak implementasi


Masalah pertama saya adalah bahwa keadaan memungkinkan aplikasi untuk memiliki data yang berbeda dari entitas api jarak jauh: - /
mfrachet

apa yang Anda maksud dengan negara memungkinkan? dimanapun memancarkan perubahan yang disebut itu akan disebut React View dan sekali lagi disebut metode perubahan negara
Dhaval Patel

Mengakui bahwa saya membangun aplikasi dengan fluks. Saya berurusan dengan API dan kemudian saya menyimpan data di dalam toko saya. Bagaimana jika pengguna memodifikasi data jarak jauh? Saya akan memiliki perbedaan antara klien dan server
mfrachet

sekarang di mana saya dapat menemukan alasannya. Jika semua dispatcher dan store akan melakukan forward untuk melihat, maka mengapa tidak dapat melakukan tindakan memperbarui tampilan secara langsung. mengapa ada perantara
Muhammad Umer

@MuhammadUmer: Dispatcher adalah salah satu untuk aplikasi dan toko didasarkan pada komponen dalam aplikasi sehingga untuk menghapus redundansi perantara diperkenalkan
Dhaval Patel

1

Mencari contoh sederhana ( https://github.com/facebook/flux/tree/master/examples/flux-todomvc/ ), "toko mengelola status aplikasi untuk domain tertentu dalam aplikasi." Artinya, mereka mengandung data tentang keadaan aspek aplikasi dan semua kode untuk mengubahnya. Setiap kali ada pembaruan baru dari Dispatcher, semua Toko melihatnya, mereka memutuskan bagaimana memperbarui data mereka sebagai respons, dan kemudian mereka memberi tahu Views bahwa data telah berubah. Dalam contoh, Toko berisi hal-hal seperti "daftar utas yang tak terlihat" (tempat Dispatcher memberi tahu mereka bahwa pesan baru telah tiba atau pesan lama telah dibaca, dan Tampilan menampilkan utas pesan kepada pengguna) dan "waktu pemutaran saat ini dan negara."

Secara lebih teknis: mereka adalah lapisan tengah kerangka kerja yang mendaftarkan panggilan balik dengan Dispatcher untuk menerima pembaruan, lalu memberi tahu Tampilan ketika keadaan data berubah. (Pandangan kemudian dapat mengirim tindakan kembali ke Dispatcher.) Ada antarmuka abstrak yang mereka terapkan, di mana setiap Toko mendaftarkan panggilan balik dengan Dispatcher dan menyiarkan acara ke Views, tetapi setiap Toko tampaknya mewakili domain tertentu dengan cara yang konkret. (Apakah ada contoh tandingan?)


0

Toko adalah area kode yang menyimpan status aplikasi dan logika kompleks. Alasannya adalah beberapa tampilan kemungkinan akan menggunakan data yang sama, tetapi menampilkannya dengan cara yang berbeda, atau menampilkan beberapa tetapi tidak semua data untuk domain tertentu. Misalnya, pengguna masuk dan Anda menerima nama depan, nama belakang, email, foto, kota, nomor alamat, dll. Informasi ini ditampilkan pada tampilan terpisah. Daripada menduplikasi data di seluruh tampilan, kita dapat menggunakan satu Store yang disebut UserStore yang menyimpan data untuk pengguna. Ini menyederhanakan sistem dengan memberikan "satu tempat untuk melakukan perubahan" setiap kali logika atau data yang disimpan harus diubah. Ada banyak alasan lain untuk menggunakan Toko, namun itu yang paling jelas menurut saya.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.