Membuat aplikasi mengambil nota dengan React dan Fluks

React, oleh Facebook, adalah perpustakaan yang sangat bagus untuk mewujudkan antara muka pengguna. Satu -satunya masalah ialah React tidak peduli bagaimana aplikasi anda mengendalikan data. Kebanyakan orang menggunakan React sebagai v dalam mv*. Oleh itu, Facebook memperkenalkan corak yang dipanggil fluks yang membawa pendekatan berfungsi untuk pengendalian data di dalam aplikasi. Tutorial ini memberikan pengenalan ringkas mengenai corak fluks dan menunjukkan cara membuat aplikasi mengambil nota menggunakan arsitektur reaksi dan fluks.

Takeaways Key

Flux adalah corak yang diperkenalkan oleh Facebook yang membawa pendekatan berfungsi untuk pengendalian data dalam aplikasi, melengkapkan penciptaan reaksi antara muka pengguna. Ia bergantung kepada aliran data unidirectional melalui komponen utama seperti kedai dan tindakan.
Tutorial menyediakan contoh untuk membuat aplikasi pengambilan nota menggunakan React, Flux dan Node.js. Aplikasi ini dibahagikan kepada pelbagai komponen seperti NoteApp, NotElistbox, NoteList, Nota, NotecreationBox, dan TextArea.
React dan refluks digunakan pada pelayan untuk memberikan komponen pada kedua -dua klien dan sisi pelayan. Teknik ini membolehkan penciptaan aplikasi isomorfik yang diberikan pada pelayan dan juga berkelakuan sebagai aplikasi halaman tunggal.
Dalam seni bina fluks, keadaan aplikasi disimpan di kedai -kedai. Apabila tindakan berlaku, ia menghantar data kepada pengirim, yang kemudiannya menghantar data ini ke kedai yang berkaitan. Kedai ini mengemas kini keadaannya dan memancarkan peristiwa perubahan, menyebabkan sebarang komponen React mendengar perubahan di kedai untuk mengemas kini dan membuat semula diri mereka.

primer pada fluks

Flux bergantung pada aliran data unidirectional. Kami mempunyai dua komponen utama dalam corak fluks:

kedai: komponen kedai, seperti namanya, menyimpan data aplikasi.
Tindakan: Data baru mengalir ke kedai melalui tindakan. Kedai mendengar tindakan dan melakukan beberapa tugas (mis. Ubah suai data) apabila tindakan dipanggil. Ini menjadikan aliran data unidirectional.

Untuk mengukuhkan konsep mari kita ambil contoh dunia sebenar. Sebagai contoh, dalam aplikasi membuat nota, anda boleh mempunyai susunan berikut:

Sebuah kedai yang dipanggil Notestore yang menyimpan senarai nota.
anda boleh mempunyai tindakan yang dipanggil Createenote. Kedai Notestore mendengarkan createnote tindakan dan mengemas kini senarai dengan nota baru apabila tindakan itu dipanggil. Data mengalir ke kedai hanya melalui tindakan.
Notestore mencetuskan peristiwa apabila datanya berubah. Komponen React anda, katakan NotElistComponent, mendengar acara ini dan mengemas kini senarai nota yang dibentangkan pada pandangan. Ini adalah bagaimana data mengalir keluar dari kedai.

Jadi, aliran data dapat divisualisasikan sebagai berikut:

Kelebihan terbesar corak fluks ialah ia menyimpan data aplikasi anda rata. Oleh kerana mutasi boleh dilakukan hanya melalui tindakan, lebih mudah untuk memahami bagaimana perubahan data mempengaruhi keseluruhan aplikasi.

nota:

Jika anda telah melalui Panduan Facebook untuk Fluks, anda mungkin dapat melihat konsep pengirim. Penghantar adalah pendaftaran panggilan balik ke kedai. Apabila tindakan dipanggil, penghantar bertindak balas dan menghantar data yang berkaitan ke semua kedai berdaftar. Kedai kemudian periksa jenis tindakan dan lakukan tugas dengan sewajarnya.

Proses di atas telah dipermudahkan oleh perpustakaan yang dipanggil refluks. Ia menghilangkan konsep penghantar dengan membuat tindakan didengar. Oleh itu, di kedai -kedai refluks boleh secara langsung mendengar tindakan dan bertindak balas terhadap penyerahan mereka.

untuk memahami corak fluks sepenuhnya mari kita membina aplikasi mengambil nota mudah dengan refluks, reaksi, dan node.js.

menyediakan persekitaran pembangunan

Kami akan menggunakan penggunaan React dan refluks sebagai modul nod dan menggunakan BROWSERIFY untuk menjadikannya tersedia di sisi klien juga. Jadi, inilah cara kita menubuhkan persekitaran:

kami akan menggunakan BROWSERIFY untuk membungkus komponen, tindakan dan kedai REACT kami ke dalam pakej .js.
Kami akan menggunakan Grunt Watch untuk mengesan perubahan dalam komponen di atas dan menjalankan semula Browserify setiap kali perubahan berlaku.
Grunt Nodemon digunakan untuk memulakan semula pelayan apabila sebarang fail .jsx atau .js diubah supaya anda tidak perlu melakukannya secara manual.

Anda boleh memuat turun kod dari GitHub dan membuka gruntfile.js untuk membaca tentang tugas -tugas. Sebaik sahaja anda mempunyai repo pada mesin anda, anda hanya boleh menjalankan NPM memasang untuk memasang modul nod yang diperlukan. Jalankan arahan berikut dan mulakan pembangunan:

grunt watch
grunt nodemon

Aplikasi ini boleh diakses di https: // localhost: 8000 dan berfungsi seperti berikut:

Bekerja di App

Mari kita mulakan dengan pelbagai komponen aplikasi. Begini bagaimana kita boleh membahagikan UI kita ke dalam pelbagai komponen:

inilah yang dilakukan oleh setiap komponen:

1. noteApp: Ini adalah komponen akar yang terdiri daripada dua komponen kanak -kanak: notelistbox dan notecreationbox.
2. NotElistBox: Mempunyai notelist komponen anak tunggal. Ia mengambil senarai nota dari kedai fluks dan menyampaikannya kepada notelist.
3. NoteList: Bertanggungjawab untuk memberikan setiap komponen nota. Lulus objek nota ke setiap komponen nota.
4. NOTA: Memaparkan butiran untuk item nota tunggal. Dalam kes ini kita hanya memaparkan tajuk. Anda boleh meneruskan dan memaparkan butiran lain seperti tarikh, sarikata dan lain -lain
5. NotecreationBox: Komponen ini menjadikan komponen Textarea dan melewati ID nota yang diedit pada masa ini, jika ada.
6. Textarea: Menyediakan Textarea untuk menerima input pengguna. Lulus teks nota ke kotak notecreation untuk penjimatan.

Membuat tindakan

mari kita gunakan refluks untuk membuat beberapa tindakan. Jika anda membuka tindakan/noteactions.js, anda dapat melihat bagaimana tindakan dibuat. Inilah coretan:

grunt watch
grunt nodemon

reflux.createActions digunakan untuk membuat tindakan. Kami mengeksport tindakan ini untuk menggunakannya dalam komponen kami.

Membuat kedai

Kami mempunyai satu kedai yang dipanggil Notestore yang mengekalkan pelbagai nota. Kod berikut digunakan untuk membuat kedai (kedai/notestore.js):

<span>var Reflux = require('reflux');
</span>
<span>var NoteActions = Reflux.createActions([
</span>  <span>'createNote',
</span>  <span>'editNote'
</span><span>]);
</span>
module<span>.exports = NoteActions;</span>

seperti yang anda lihat, kami mendengar dua tindakan, createnote dan editnote, di dalam kaedah init. Kami juga mendaftarkan panggilan balik untuk dilaksanakan apabila tindakan dipanggil. Kod untuk menambah/mengemas kini nota cukup mudah. Kami juga mendedahkan getters untuk mendapatkan senarai nota. Akhirnya, kedai dieksport supaya ia boleh digunakan dalam komponen kami.

Membuat komponen

Semua komponen React kami terletak di direktori React/Components. Saya telah menunjukkan struktur keseluruhan UI. Anda boleh menyemak kod sumber yang dimuat turun untuk mengetahui lebih lanjut mengenai setiap komponen. Di sini saya akan menunjukkan kepada anda perkara utama (iaitu bagaimana komponen kami memanggil tindakan dan berinteraksi dengan kedai).

notelistbox:

Komponen ini memperoleh senarai nota dari Notestore dan memberi mereka kepada komponen notelist yang kemudiannya menjadikan nota tersebut. Berikut adalah bagaimana komponen kelihatan seperti:

<span>var Reflux = require('reflux');
</span><span>var NoteActions = require('../actions/NoteActions');
</span>
<span>var _notes = []; //This is private notes array
</span>
<span>var NoteStore = Reflux.createStore({
</span>  <span>init: function() {
</span>    <span>// Here we listen to actions and register callbacks
</span>    <span>this.listenTo(NoteActions.createNote, this.onCreate);
</span>    <span>this.listenTo(NoteActions.editNote, this.onEdit);
</span>  <span>},
</span>  <span>onCreate: function(note) {
</span>    _notes<span>.push(note); //create a new note
</span>
    <span>// Trigger an event once done so that our components can update. Also pass the modified list of notes.
</span>    <span>this.trigger(_notes); 
</span>  <span>},
</span>  <span>onEdit: function(note) {
</span>    <span>// Update the particular note item with new text.
</span>    <span>for (var i = 0; i < _notes.length; i++) {
</span>      <span>if(_notes[i]._id === note._id) {
</span>        _notes<span>[i].text = note.text;
</span>        <span>this.trigger(_notes);
</span>        <span>break;
</span>      <span>}
</span>    <span>}
</span>  <span>},
</span>
  <span>//getter for notes
</span>  <span>getNotes: function() {
</span>    <span>return _notes;
</span>  <span>},
</span>
  <span>//getter for finding a single note by id
</span>  <span>getNote: function(id) {
</span>    <span>for (var i = 0; i < _notes.length; i++) {
</span>      <span>if(_notes[i]._id === id) {
</span>        <span>return _notes[i];
</span>      <span>}
</span>    <span>}
</span>  <span>}
</span><span>});
</span>
module<span>.exports = NoteStore; //Finally, export the Store</span>

Apabila komponen pemasangan kita mula mendengar peristiwa perubahan Notestore. Ini disiarkan apabila terdapat mutasi dalam senarai Nota. Komponen kami mendengarkan acara ini supaya ia dapat membuat semula nota dalam kes sebarang perubahan. Baris berikut mendaftarkan pendengar:

<span>var React = require('react');
</span><span>var NoteList = require('./NoteList.jsx');
</span><span>var NoteStore = require('../../stores/NoteStore');
</span>
<span>var NoteListBox = React.createClass({
</span>  <span>getInitialState: function() {
</span>    <span>return { notes: NoteStore.getNotes() };
</span>  <span>},
</span>  <span>onChange: function(notes) {
</span>    <span>this.setState({
</span>      <span>notes: notes
</span>    <span>});
</span>  <span>},
</span>  <span>componentDidMount: function() {
</span>    <span>this.unsubscribe = NoteStore.listen(this.onChange);
</span>  <span>},
</span>  <span>componentWillUnmount: function() {
</span>    <span>this.unsubscribe();
</span>  <span>},
</span>  <span>render: function() {
</span>    <span>return (
</span>        <span><div className="col-md-4">
</span>            <span><div className="centered"><a href="" onClick={this.onAdd}>Add New</a></div>
</span>            <span><NoteList ref="noteList" notes={this.state.notes} onEdit={this.props.onEdit} />
</span>        <span></div>
</span>    <span>);
</span>  <span>}
</span><span>});
</span>
module<span>.exports = NoteListBox;</span>

Jadi, apabila terdapat kaedah perubahan onchange komponen dipanggil. Kaedah ini menerima senarai nota yang dikemas kini dan mengubah keadaan.

<span>this.unsubscribe = NoteStore.listen(this.onChange);</span>

sebagai this.state.notes diluluskan sebagai prop kepada notelist, apabila keadaan berubah semula notelist-render sendiri.

Akhirnya, kami menulis ini.UnsubScribe () di dalam ComponentWillUnmount untuk mengeluarkan pendengar.

Jadi, ini adalah bagaimana notelist sentiasa tetap terkini dengan mendengar acara perubahan kedai. Sekarang mari kita lihat bagaimana nota dibuat/diedit.

notecreationbox:

Lihatlah kaedah notecreationbox berikut:

grunt watch
grunt nodemon

Kaedah ini dipanggil apabila butang Simpan diklik. Ia menerima NoteText sebagai parameter pertama. Jika ID diluluskan sebagai parameter kedua, kita tahu ini adalah operasi edit dan memohon tindakan noteactions.EditNote (). Jika tidak, kami menjana ID untuk nota baru dan panggilan noteactions.createenote (). Ingat Notestore kami mendengar tindakan ini. Bergantung pada tindakan panggilan balik kedai yang sesuai dilaksanakan. Sebaik sahaja data bermutasi, kedai mencetuskan peristiwa perubahan dan komponen notelist kami mengemas kini sendiri.

Ini adalah bagaimana data mengalir ke dalam sistem dan seterusnya keluar dalam aplikasi berasaskan fluks.

mengapa menggunakan React pada pelayan

Anda mungkin tertanya -tanya mengapa saya menggunakan React dan Refluks pada pelayan. Salah satu ciri keren React ialah komponen boleh diberikan pada klien dan pelayan. Menggunakan teknik ini, anda boleh membuat aplikasi isomorfik yang diberikan pada pelayan dan juga berkelakuan sebagai aplikasi halaman tunggal. Walaupun ini mungkin tidak diperlukan untuk aplikasi nota, anda boleh menggunakan persediaan ini dengan mudah untuk membina aplikasi isomorfik kompleks pada masa akan datang.

Saya menggalakkan anda untuk melalui kod sumber dan memperbaikinya lebih lanjut kerana terdapat banyak ruang untuk penambahbaikan. Sekiranya anda mempunyai pertanyaan, beritahu saya dalam komen.

Terima kasih kerana membaca!

soalan yang sering ditanya mengenai membuat aplikasi pengambilan nota dengan React and Flux

Apakah peranan fluks dalam membuat aplikasi pengambilan nota dengan React? Ia melengkapkan komponen pandangan komposisi React dengan menggunakan aliran data unidirectional. Dalam konteks membuat aplikasi pengambilan nota, Flux memainkan peranan penting dalam menguruskan aliran data. Ia memastikan bahawa data bergerak ke satu arah, dari tindakan ke kedai, dan kemudian ke pandangan. Ini menjadikan aplikasi lebih mudah diramalkan dan lebih mudah difahami, kerana ia mengelakkan kerumitan perkongsian data antara komponen dan kekeliruan data dua hala yang mengikat. ? React bertanggungjawab untuk memberikan pandangan dan memberi respons kepada input pengguna, sementara Flux menguruskan aliran data aplikasi. Apabila pengguna berinteraksi dengan komponen React (seperti menambah nota baru), ia mencetuskan tindakan. Tindakan ini mengemas kini kedai (data pusat aplikasi) melalui penghantar. Kedai kemudian memancarkan peristiwa perubahan, menyebabkan komponen React mengemas kini dan membuat semula jika perlu.

Apakah komponen utama seni bina fluks? Tindakan adalah muatan maklumat yang menghantar data dari aplikasi kepada penghantar. Pengirim adalah sejenis hab pusat yang menguruskan semua aliran data dalam aplikasi. Kedai mengandungi keadaan aplikasi dan logik, dan mereka dikemas kini oleh penghantar. Akhirnya, pandangan (komponen React) mendengar perubahan di kedai-kedai dan membuat semula diri mereka apabila perubahan tersebut berlaku. Dalam fluks, keadaan aplikasi anda biasanya disimpan di kedai -kedai. Apabila tindakan berlaku (seperti menambah nota baru), ia menghantar data kepada pengirim. Penghantar kemudian menghantar data ini ke kedai yang berkaitan. Kedai ini mengemas kini negeri dan memancarkan peristiwa perubahan. Mana-mana komponen React yang mendengar perubahan di kedai kemudian akan mengemas kini dan membuat semula diri mereka, mencerminkan keadaan baru aplikasi. 🎜>

Seni bina fluks membantu mengekalkan skalabilitas aplikasi pengambilan nota dengan menyediakan aliran data yang jelas dan boleh diramal. Ini menjadikan aplikasi lebih mudah difahami dan diubahsuai kerana ia tumbuh dalam kerumitan. Aliran data unidirectional memastikan perubahan dalam satu bahagian aplikasi tidak disangka -sangka mempengaruhi bahagian lain, mengurangkan kemungkinan pepijat dan menjadikan aplikasi lebih mudah untuk menguji dan debug. Aplikasi Nota Menggunakan React and Fluks?

Interaksi Pengguna dalam aplikasi nota yang dibina dengan React dan Fluks biasanya dikendalikan melalui tindakan. Apabila pengguna berinteraksi dengan komponen React (seperti mengklik butang untuk menambah nota baru), ia mencetuskan tindakan. Tindakan ini menghantar data kepada penghantar, yang mengemas kini kedai yang berkaitan. Kedai kemudian memancarkan peristiwa perubahan, menyebabkan komponen React Mendengarkan untuk mengemas kini dan membuat semula. -Merat yang dibina dengan React dan Fluks boleh dilakukan dengan menggunakan pelbagai perpustakaan dan kerangka ujian. Untuk komponen reaksi ujian unit, perpustakaan seperti jest atau enzim boleh digunakan. Untuk menguji tindakan fluks dan kedai, anda boleh menggunakan Jest bersama-sama dengan perpustakaan seperti redux-mock-store atau flux-mock-store. Ujian akhir-ke-akhir boleh dilakukan menggunakan alat seperti cypress atau dalang. Dengan React dan Fluks boleh dilakukan menggunakan pelbagai alat. Lanjutan Alat Pemaju React untuk Chrome dan Firefox membolehkan anda memeriksa hierarki komponen React, props, dan negara. Untuk debugging fluks, anda boleh log tindakan dan perubahan keadaan ke konsol, atau menggunakan alat seperti Redux Devtools jika anda menggunakan Redux sebagai pelaksanaan fluks anda.

Bolehkah saya menggunakan perpustakaan atau kerangka lain dengan reaksi dan fluks apabila membina aplikasi pengambilan nota saya? Sebagai contoh, anda mungkin menggunakan perpustakaan penghalaan seperti Router React untuk navigasi, perpustakaan ujian seperti JEST untuk ujian, atau perpustakaan UI seperti bahan-UI untuk menggayakan aplikasi anda. Pilihan perpustakaan atau kerangka akan bergantung kepada keperluan dan keutamaan khusus anda. Aplikasi pengambilan nota yang dibina dengan React dan Fluks boleh melibatkan pelbagai strategi. Satu strategi yang sama adalah untuk memastikan bahawa komponen hanya membuat semula apabila perlu, dengan berhati-hati menguruskan keadaan dan props dan menggunakan pureComponent React atau harus komponenupdate apabila sesuai. Strategi lain mungkin termasuk mengoptimumkan masa beban awal aplikasi dengan pemisahan kod, atau mengoptimumkan pengambilan data dengan menggunakan perpustakaan seperti Relay atau Apollo.

Atas ialah kandungan terperinci Membuat aplikasi mengambil nota dengan React dan Fluks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!