Menguruskan Negeri di Aurelia: Cara Menggunakan Aurelia dengan Redux

Bina editor markdown dengan keadaan yang boleh diramal menggunakan Aurelia dan Redux

Artikel ini meneroka cara mengintegrasikan Redux dalam kerangka Aurelia dan menunjukkan proses ini dengan membina editor markdown dengan keupayaan Undo/Redo. Artikel ini dibahagikan kepada tiga peringkat: tetapan Aurelia Asas, Redux Bersepadu untuk Pengurusan Negeri, dan menambah fungsi Undo/Redo.

mata teras:

Redux menyediakan bekas keadaan yang boleh diramal yang memudahkan pengurusan negara -negara aplikasi, menjadikannya konsisten dan mudah diuji, terutama dalam persekitaran yang kompleks.
Mengintegrasikan Redux dengan Aurelia termasuk menubuhkan penyimpanan Redux, mengkonfigurasi kebergantungan, dan menyambung penyimpanan ke aplikasi Aurelia, yang sangat mudah dan mudah dengan plugin Aurelia-Redux.
Tutorial ini menunjukkan membina editor markdown menggunakan Aurelia dan Redux, dengan fungsi undo/redo yang diuruskan oleh plugin Redux-UNDO.
Aplikasi sampel dibahagikan kepada tiga peringkat: Persediaan Aurelia Asas, Redux Bersepadu untuk Pengurusan Negeri, dan menambah fungsi Undo/Redo.
Pelaksanaan Redux menggantikan data bidirectional Aurelia yang mengikat dengan aliran data sehala, mengubah cara pandangan bertindak balas terhadap perubahan dalam keadaan.
Untuk Redux Newbies atau mereka yang memerlukan semakan, disarankan untuk merujuk kepada siri video Egghead Dan Abramov untuk konsep dan ciri -ciri teras Redux.

Artikel ini dikaji semula oleh Moritz Kröger dan Jedd Ahyoung. Terima kasih kepada semua pengulas rakan sebaya di SitePoint untuk mendapatkan kandungan SitePoint dengan sebaik -baiknya! Terima kasih kepada Simon Codrington kerana mereka bentuk gaya untuk persembahan.

Pada masa kini, ketika membangunkan aplikasi web, orang memberi perhatian yang besar kepada bekas negara, terutama semua mod fluks. Redux adalah salah satu pelaksanaan Flux yang paling menonjol. Bagi mereka yang tidak terperangkap dengan gelombang ini, Redux adalah perpustakaan untuk membantu anda mengekalkan perubahan keadaan anda. Ia menyimpan seluruh keadaan aplikasi dalam satu pokok objek.

Dalam artikel ini, kami akan merangkumi asas -asas cara menggunakan Redux dengan Aurelia, generasi baru Rangka Kerja Pelanggan JavaScript Sumber Terbuka. Tetapi kita tidak akan membina contoh kaunter yang lain, kita akan melakukan sesuatu yang lebih menarik. Kami akan membina editor Markdown yang mudah dengan keupayaan Undo dan Redo. Kod untuk tutorial ini boleh didapati di GitHub, di sini adalah demo projek yang telah siap.

Nota: Apabila mempelajari perkara -perkara baru, saya lebih suka kembali ke sumber, dalam hal Redux, pencipta Redux (Dan Abramov) mempunyai siri video Egghead yang hebat. Oleh kerana kita tidak akan terperinci tentang bagaimana Redux berfungsi, jika anda perlu menyemak dan mempunyai beberapa jam, saya sangat mengesyorkan anda memberikan siri ini.

Struktur tutorial:

Artikel ini akan membina tiga versi komponen yang sama.

Versi pertama akan menggunakan kaedah Aurelia tulen. Di sini anda akan belajar bagaimana untuk menyediakan aplikasi Aurelia, mengkonfigurasi kebergantungan dan membuat pandangan dan pandangan yang diperlukan. Kami akan melihat contoh bangunan dalam cara Aurelia klasik menggunakan pengikatan data dua hala.

Versi kedua akan memperkenalkan Redux untuk mengendalikan keadaan aplikasi. Kami akan menggunakan pendekatan biasa, yang bermaksud tidak ada plugin tambahan untuk mengendalikan interoperabilitas. Dengan cara ini, anda akan belajar bagaimana untuk menyesuaikan diri dengan proses pembangunan Redux menggunakan ciri-ciri luar kotak Aurelia.

Versi akhir akan melaksanakan fungsi Undo/Redo. Sesiapa yang membina ciri -ciri sedemikian dari awal tahu bahawa bermula adalah mudah, tetapi perkara -perkara dapat dengan cepat keluar dari kawalan. Itulah sebabnya kami akan menggunakan plugin Redux-UNDO untuk mengendalikan ini untuk kami.

Sepanjang artikel, anda akan melihat pelbagai rujukan kepada dokumentasi Aurelia rasmi untuk membantu anda mencari maklumat lanjut. Semua kod yang diterangkan juga dikaitkan kembali ke fail sumber asalnya.

Jadi, tanpa lagi ado, mari kita mulakan.

Bina aplikasi Aurelia baru:

Oleh kerana kita memberi tumpuan kepada berinteraksi dengan Aurelia, contoh ini berdasarkan kaedah bangunan aplikasi pilihan Aurelia, iaitu Aurelia CLI.

Menurut langkah -langkah yang diterangkan dalam dokumentasi CLI, kami memasang CLI secara global menggunakan arahan berikut:

npm install aurelia-cli -g

Seterusnya, kami akan membuat aplikasi baru menggunakan arahan berikut:

au new aurelia-redux

Ini akan memulakan dialog yang bertanya jika anda ingin menggunakan tetapan lalai atau menyesuaikan pilihan anda. Pilih Nilai Lalai (ESNext) dan pilih Buat Projek dan pasang kebergantungan. Kemudian tukar ke folder projek baru (menggunakan CD Aurelia-Redux) dan mulakan pelayan pembangunan dengan arahan berikut:

au run --watch

Jika semuanya berjalan seperti yang dirancang, ini akan memulakan contoh pelayan pembangunan BrowserSync dengan port pendengaran lalai 9000. Di samping itu, ia akan menjejaki perubahan yang dibuat kepada aplikasi dan menyegarkan jika diperlukan.

Tambahkan kebergantungan ke bundler:

Langkah seterusnya ialah memasang kebergantungan yang diperlukan untuk projek yang akan datang. Oleh kerana Aurelia CLI dibina di atas modul NPM, kita boleh melakukan ini menggunakan arahan berikut:

npm install --save marked redux redux-undo

Baiklah, mari memperkenalkannya satu persatu. Ditandai adalah berfungsi sepenuhnya, mudah digunakan parser markdown dan pengkompil yang akan kami gunakan untuk ... seperti namanya. Redux adalah pakej untuk perpustakaan itu sendiri, dan Redux-UNDO adalah plugin mudah yang menambah fungsi Undo/Redo ke bekas keadaan aplikasi kami.

Di sebalik tabir, Aurelia CLI menggunakan keperluan, jadi semua kebergantungan dirujuk melalui format definisi modul asynchronous (AMD). Semua yang tersisa sekarang adalah untuk memberitahu aplikasi Aurelia bagaimana untuk mencari kebergantungan ini di mana.

Untuk melakukan ini, buka fail Aurelia.json yang terletak di subfolder Projek Aurelia aplikasi. Jika anda tatal ke bahagian Bundle, anda akan melihat dua objek. Satu ialah App-Bundle, yang mengandungi kod aplikasi anda sendiri, dan yang lain adalah vendor-bundle, yang digunakan untuk membungkus semua kebergantungan aplikasi ke dalam fail bundle berasingan. Objek ini mengandungi harta yang dipanggil kebergantungan, anda meneka, dan di sinilah kami akan menambah kebergantungan tambahan.

Operasi manual fail aurelia.json kini merupakan langkah yang diperlukan, tetapi akan automatik dalam versi masa depan.

Terdapat pelbagai cara untuk mendaftarkan kebergantungan tersuai, yang paling difahami dengan mengikuti dokumentasi Aurelia rasmi yang sepadan. Kami akan menambah kod berikut:

npm install aurelia-cli -g

(kandungan berikut adalah serupa dengan teks asal, tetapi pelarasan pernyataan dan bahagian perenggan telah dibuat untuk menjadikannya lebih fasih dan mudah dibaca. Oleh kerana batasan ruang, kandungan berikutnya hanya akan diringkaskan secara ringkas dan coretan kod teras dikekalkan.)

yang seterusnya adalah untuk menyambungkan kebergantungan aplikasi, menambah gaya, melaksanakan editor markdown melalui Aurelia, memperkenalkan Redux, mengemas kini pandangan, melaksanakan fungsi Undo/Redo, dan akhirnya meringkaskan dan Soalan Lazim. Bahagian -bahagian ini semua mengikuti logik yang sama seperti teks asal, tetapi ungkapan bahasa lebih ringkas dan kod tersebut diselaraskan, mengekalkan fungsi teras.

Contoh coretan kod teras:

(viewModel dalam mod redux)

au new aurelia-redux

(paparan gaya redux)

au run --watch

(mengandungi viewModel untuk undoing/redoing)

npm install --save marked redux redux-undo

Artikel akhirnya meringkaskan kelebihan Redux di Aurelia dan bagaimana ia berfungsi bersempena dengan sistem pengikat data Aurelia, dan memberikan jawapan kepada sumber pembelajaran dan soalan yang sering ditanya. Seluruh proses dengan jelas menunjukkan bagaimana untuk mengintegrasikan Redux secara beransur -ansur ke dalam aplikasi Aurelia dan melaksanakan keupayaan pengurusan negeri yang lebih maju.

Atas ialah kandungan terperinci Menguruskan Negeri di Aurelia: Cara Menggunakan Aurelia dengan Redux. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!