Redux: Apakah boleh dan mungkin untuk menyimpan komponen reaksi di dalam peredam?

Bisakah Anda menjelaskan mengapa Anda perlu melakukannya?
Toko harus berisi status aplikasi yang dapat diserialisasi, bukan komponen DOM yang merupakan representasi visual dari status ini.

Jangan pernah melakukannya, lihat saran resmi.
Apa yang Tidak Harus Dilakukan di Negara Bagian?

@simongfxu :+1:

Terima kasih atas klarifikasinya @simongfxu

Yang _mungkin_ ingin Anda lakukan adalah memberikan ID string unik ke beberapa komponen dan menyimpan ID tersebut dalam status. Misalnya, Anda mungkin menyimpan sesuatu seperti ModalTypes.LOGIN di state.openModalId , dan kemudian switch di dalam komponen <App> untuk memilih komponen modal mana yang akan ditampilkan.

@gaearon ya, saya mengambil jalan yang sama. Saya menyimpan nama (yang harus unik) alih-alih id. Kemudian saya require komponen reaksi jika diperlukan. Saya perlu mengaktifkan dan menonaktifkan komponen dan reduksi pada perintah.

Saya tahu masalah ini sudah selesai, tetapi saya ingin ikut campur karena saya memiliki kasus penggunaan yang serupa.

Saya memiliki toko bernama editor dan kunci di toko itu bernama activeTool . Kunci ini memegang string dan berfungsi dengan baik. Namun, saya juga memiliki kunci bernama toolbar ; dalam kunci ini, saya ingin menyimpan daftar kelas komponen yang harus dirender dengan alat aktif.
Tindakan saya adalah seperti ini:

{
  type: 'SELECT_TOOL',
  payload: {
    name: 'toolName',
    tools: [A, List, Of, Tools]
  }
}

Jadi, di peredam editor , kami menargetkan tindakan ini dan melakukan sesuatu seperti berikut (dengan js yang tidak dapat diubah, tapi itu mungkin tidak penting):

return state
  .set('activeTool', payload.name)
  .set('toolBar', payload.tools)

Namun, dev-tools melaporkan activeTool , tetapi toolBar telah dihapus dari toko editor . Pada dasarnya gejalanya sama dengan OP.

Bagaimanapun, saya hanya ingin membuat kasus penggunaan saya di luar sana ....
Saya akhirnya melupakan penggunaan properti toolBar di toko dan, sekarang, di komponen yang membuat bilah alat, saya memiliki objek yang memetakan nama alat dengan larik komponen.

Bersulang!

@oscar-g Anda harus menetapkan pengidentifikasi serial (string atau numerik) ke alat Anda -- inilah yang akan Anda lewati melalui tindakan dan penyimpanan di toko, bukan komponen Bereaksi itu sendiri.

Saya memiliki objek yang memetakan nama alat dengan array komponen.

Ya, ini adalah satu-satunya cara untuk pergi.

Terima kasih, @sompylasar. Saya pikir pada dasarnya itulah yang akhirnya saya lakukan.

1. action = {type: SELECT_TOOL, name: 'some string'}
2. Letakkan nama di toko.
3. Dalam render komponen: return (TOOLMAP[this.props.tool.name])

Di mana kunci dalam TOOLMAP dipetakan ke array komponen. Itu hanya konstanta dalam file komponen.

Apakah ini yang Anda maksud?

Ya, ini adalah cara untuk pergi.

@simongfxu tautan Anda "Apa yang Seharusnya Tidak

@Bartuz , @simongfxu : sebenarnya tidak yakin dokumen baru memiliki yang setara dengan bagian itu.

Berikut tautan ke halaman asli di Arsip Web: React Docs: Interactivity and Dynamic UIs . Juga, inilah konten aslinya, dikutip:

Apa _Seharusnya_ Tidak Dimasukkan?

this.state hanya boleh berisi jumlah minimal data yang diperlukan untuk mewakili status UI Anda. Dengan demikian, tidak boleh mengandung:

• Data yang dihitung: Jangan khawatir tentang menghitung nilai sebelumnya berdasarkan status — lebih mudah untuk memastikan bahwa UI Anda konsisten jika Anda melakukan semua perhitungan dalam render() . Misalnya, jika Anda memiliki larik item daftar dalam status dan Anda ingin merender hitungan sebagai string, cukup render this.state.listItems.length + ' list items' dalam metode render() alih-alih menyimpannya dalam status.
• React komponen: Bangun mereka di render() berdasarkan props dan state yang mendasarinya.
• Data duplikat dari alat peraga: Coba gunakan alat peraga sebagai sumber kebenaran jika memungkinkan. Salah satu kegunaan yang valid untuk menyimpan props dalam keadaan adalah untuk dapat mengetahui nilai sebelumnya, karena props dapat berubah seiring waktu.

2 sen saya:

1. Saya memiliki aplikasi seluler dengan komponen tajuk tunggal yang membuat judul halaman saat ini (berdasarkan string di toko) dan mungkin atau mungkin tidak memiliki beberapa tombol tindakan khusus untuk halaman saat ini (edit, simpan/batalkan, tindakan > dropdown dengan beberapa tindakan, dll). Ini akan menjadi kasus penggunaan untuk melewatkan komponen melalui toko, misalnya setiap halaman "menyuntikkan" komponennya sendiri di area header.
2. Pendekatan di atas akan bertentangan dengan aliran di mana React dan Redux telah dibangun dan dioptimalkan. Portal menawarkan alternatif yang menarik jika Anda mau, tetapi kemudian Anda melewati toko. Ini bisa baik atau buruk tergantung pada kebutuhan pemantauan/pencatatan Anda. Menggunakan Redux, string atau objek dengan string dapat menentukan tombol, kemudian string 'aksi' dapat memicu perilaku dengan membuat komponen Anda mendengarkannya.

@Dindaleon Saya mengerti maksud Anda dan menurut saya itu menarik, terlepas dari apa yang disarankan oleh React Doc resmi.

Saya memiliki masalah serupa. Tidak yakin apakah membuka masalah adalah ide yang bagus.

Saya pada dasarnya memiliki sistem plugin di mana plugin dapat mendaftar dan diizinkan untuk menambahkan komponen baru ke UI. Saat ini saya menambahkannya di bawah objek 'komponen' di dalam toko. Mereka ditambahkan menggunakan pembuat tindakan dan disimpan di sana menggunakan di bawah kunci muatan. Komponen UI yang memungkinkan plugin ditambahkan cukup periksa toko jika ada yang ditambahkan. Jika ya, mereka menarik komponen dari sana dan merendernya.

Saya telah membaca banyak tentang menambahkan fungsi (pereduksi)/komponen reaksi ke toko. Tetapi saya tidak dapat menemukan solusi yang baik untuk ini. Saya tidak dapat benar-benar memetakan elemen UI ke I'd karena saya tidak memiliki cara untuk mengetahui setiap elemen selama waktu kompilasi. Dan entah bagaimana saya memerlukan mekanisme pendaftaran untuk membuat elemen UI baru tersedia untuk aplikasi inti.

Apakah ada yang mengalami situasi serupa? Bagaimana Anda menyelesaikannya? Saya telah melihat banyak proyek sumber terbuka yang disewa untuk memiliki masalah yang sama (atom misalnya). Mereka menyimpan komponen mereka dalam ComponentStore (fluks).

@SirWindfield : Anda mungkin ingin melihat ini: http://dylanpaulus.com/reactjs/2017/12/08/global-component-registration/ . Tampaknya menjadi perpanjangan dari pendekatan dasar untuk menangani pencarian komponen UI saat runtime , hanya diperluas untuk memiliki variabel global-ish dan fungsi registrasi untuk ditambahkan ke tabel itu daripada harus ditulis tangan.

Jika Anda membutuhkannya untuk tersedia di seluruh aplikasi, Anda juga dapat menulis komponen <Provider> -jenis Anda sendiri yang menggunakan context React untuk membuatnya tersedia untuk komponen yang sangat bersarang.

@markerikson terima kasih atas jawabannya!
Ini sebenarnya terlihat cukup dekat dengan ide fluks yang saya miliki :senyum:
Cukup sulit untuk menemukan sumber tentang topik ini. Sepertinya orang pada umumnya tidak tertarik untuk menulis sistem plugin menggunakan redux dan bereaksi.

@SirWindfield : Ini pasti topik yang kurang dikenal, ya.

Karena itu, saya telah membuat katalog beberapa perpustakaan tipe "Redux plugin/encapsulation" di https://github.com/markerikson/redux-ecosystem-links/blob/master/component-state.md#modularity -and-encapsulation . Saya belum punya waktu untuk mencoba salah satu dari mereka sendiri. Suatu hari nanti saya ingin dapat bereksperimen dengan mereka dan mendapatkan gambaran tentang kemampuan mereka, tetapi saya memiliki terlalu banyak hal yang harus dilakukan. Namun, Anda mungkin ingin memeriksanya dan melihat apakah ada yang cocok dengan kasus penggunaan Anda.

@markerikson terima kasih! Daftar ini luar biasa.

Bagaimana jika saya ingin menyimpan dalam status objek File, untuk tujuan pelacakan unggahan. Haruskah ini baik-baik saja?

Sebenarnya tidak, saya hanya dapat menyimpan objek serial.

Anda dapat menyimpan jalur file tersebut

@albanx berpotensi ya, Anda dapat menyandikan file (base64) dan menyimpannya kapan pun Anda mau. Pertanyaannya adalah: apakah Anda benar-benar perlu menyimpan file?

@SirWindfield maksud saya File HTML5, Blob (ketika pengguna memilih file di browser untuk diunggah).
@soulclown Saya benar-benar tidak membutuhkan konten ke file, tetapi hanya referensi ke elemen File. Saya membuat pengunggah dan saya ingin melacak file yang diunggah dan kemajuan di negara bagian. Saya akhirnya akan membuat ID untuk file dan menyimpannya di negara bagian.

Kasus yang menarik, Alban. Terus perbarui kami apa solusi Anda untuk ini

[gambar: Jalur surat]
https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality5&
Pengirim
diberitahu oleh
Jalur surat
https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality5&
08/01/18,
15:12:04

2018-08-01 10:28 GMT+02:00 Alban [email protected] :

@SirWindfield https://github.com/SirWindfield maksud saya File HTML5,
Blob (ketika pengguna memilih file di browser untuk diunggah).
@soulclown https://github.com/soulclown Saya benar-benar tidak membutuhkannya
konten ke file, tetapi hanya referensi ke elemen File. saya
membuat pengunggah dan saya ingin melacak file yang diunggah dan
kemajuan di negara bagian. Saya akhirnya akan membuat ID untuk file dan toko
bahwa di negara bagian.

—
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub
https://github.com/reduxjs/redux/issues/1248#issuecomment-409494273 , atau bisu
benang
https://github.com/notifications/unsubscribe-auth/AEL3RHZQT-Kp-MLFoUZryI0hrals0MFaks5uMWa8gaJpZM4HGj-F
.

FWIW, seperti yang diisyaratkan oleh @markerikson tentang kerangka kerja plugin, saya telah menyimpan komponen React, reduksi, dan middleware dalam status redux selama bertahun-tahun menggunakan paket react-features dan react-redux-features , dengan SSR .

Ini berfungsi karena saya tidak membuat cerita bersambung bagian fitur dari pohon keadaan yang berisi komponen Bereaksi. Saya baru saja membuat serial id fitur mana yang dimuat selama SSR (ini adalah id global unik @gaearon
disarankan). Tetapi di mana saya berangkat dari konsensus adalah, ketika bootstrap sisi klien saya membangun kembali bagian yang tidak dapat serial dari awal, memuat konten untuk id fitur yang berlaku.

Satu-satunya downside adalah itu tidak akan berhasil dengan perjalanan waktu. Tetapi dalam semua debugging saya, saya tidak pernah benar-benar mendambakan debugger perjalanan waktu ... log redux cukup baik untuk saya.

Saya kira saya bisa memindahkan status non-serializable ke dalam semacam toko terpisah dengan penyedia konteksnya sendiri. Mungkin. Ini mungkin PITA yang berbeda?

Saya sampai pada desain ini karena memiliki tabel pencarian komponen dan peredam global yang terpisah akan jauh lebih rumit untuk dikoordinasikan dengan pemuatan chunk async.