Bagaimana cara menyusun aliran data di aplikasi React + React Router + PouchDB saya?

Saat ini saya sedang membangun aplikasi penjadwalan kursus bernama Serif, yang memuat data kursus ke dalam PouchDB pada pemuatan pertama. UI-nya seperti ini:

masukkan deskripsi gambar di sini

"Istilah Saat Ini" adalah daftar dropdown dan mengontrol kumpulan data terkini yang digunakan pada waktu tertentu. Misalnya, jika "Musim Gugur 2016" dipilih, maka pengguna dapat mencari, menelusuri, memilih kursus, dan membuat kalender menggunakan kursus dari katalog Musim Gugur 2016. Saat pengguna beralih ke "Musim Semi 2016", mereka sekarang akan menggunakan kumpulan data Musim Semi 2016, dan seterusnya.

Saya menggunakan PouchDB untuk menjaga semuanya tetap di sisi klien (setidaknya untuk saat ini). Karena itu, inilah struktur komponen saya saat ini (kira-kira, tanpa komponen yang hanya untuk tata letak):

  • Serif (one of my Router routes)
    • Subnav
      • TermSelect (this is the one you see on the top right: "Current Term")
    • Mencari
    • Jelajahi
    • Calendars
      • calendar selection stuff
      • kalender sebenarnya

Pertanyaan saya berfokus pada aliran data dari PouchDB ke komponen TermSelect (tetapi jawaban yang benar akan menginformasikan penataan semua komponen lainnya).

Cara saya membuatnya sekarang, Serif memiliki status yang disebut currentTerm yang melacak istilah aplikasi saat ini. Di konstruktor, PouchDB ditanyakan untuk term pertama dan menyetel currentTerm ke nilai tersebut.

Dalam metode render Serif, PouchDB dikueri untuk daftar istilah dalam db dan daftar tersebut diformat ke format yang diharapkan dan kemudian diteruskan sebagai penyangga ke komponen Subnav yang kemudian meneruskannya ke komponen TermSelect.

Komponen TermSelect menggunakan props yang diterima untuk mengisi daftar dropdown dan menetapkan nilai tampilan defaultnya ke yang pertama dalam daftar, sehingga menghasilkan "Musim Gugur 2016" seperti yang Anda lihat di atas. Saat opsi dipilih, fungsi panggilan balik yang diturunkan sebagai bagian dari data akan dipanggil, yang mengubah status komponen Serif.

Selain masalah nilai default yang memerlukan klik untuk menampilkannya, ini sebagian besar berhasil. Apakah ini cara yang benar untuk melakukan sesuatu? Daripada meneruskan data istilah dari Serif ke komponen TermSelect, komponen TermSelect dapat menanyakannya langsung dari PouchDB.

Setiap saran untuk perbaikan, atau bahkan sekadar konfirmasi bahwa ini adalah pola aliran data yang benar akan sangat kami hargai. Saya baru mengenal React dan saya kesulitan mengatur semua pola dan antipola yang benar (jangan gunakan prop untuk menyetel status, komponen harus meneruskan data dari stateful ke stateless, dll).

Terima kasih!


reactjs design-patterns pouchdb
person Joon Park    schedule 31.08.2016    source sumber

Jawaban (1)


arrow_upward
0
arrow_downward

Saya rasa tidak ada yang salah dengan desain Anda tentang di mana dan kapan React berkomunikasi dengan PouchDB. Pertanyaan Anda wajar dan bagus!

Sepertinya masalah Anda ada pada manajemen negara. Apakah Anda mengelolanya?

Jika Anda tidak:

Gunakan redux. Saya biasanya memiliki tindakan yang dikirimkan yang mengambil informasi apa pun yang ingin Anda simpan dan menyimpannya ke PouchDB. Hal ini membuat komunikasi Pouch berada di satu tempat, dan mengurangi stres/pengetahuan yang perlu diketahui aplikasi React Anda tentang PouchDB.

Jika Anda:

Buat tindakan yang bertanggung jawab untuk menyerahkan data ke Kantong. Tidak peduli bagaimana hal itu sampai ke sana (sampai pada titik tertentu); terserah Anda, dan terserah desain aplikasi Anda.

Sepertinya Anda menuju ke arah yang benar. Sepertinya tidak ada yang salah atau jelas-jelas salah di sini.

person nshoes    schedule 04.09.2016