Panduan pemula untuk bertindak balas / redux - bagaimana untuk memulakan pembelajaran dan tidak boleh dibebani

Gambar oleh Roman Mager pada Unsplash

Penafian: Ini adalah panduan pemula yang ditulis oleh pemula React / Redux.

Mempelajari rangka kerja Javascript baru pada tahun 2017 boleh menjadi tugas yang menakutkan. Katakanlah anda akhirnya terjebak dengan Angular, tetapi semua orang telah berpindah ke perkara baru yang berkilat yang dipanggil React. Anda membaca beberapa tutorial dan tidak boleh menunggu untuk mengkonfigurasi projek React baharu anda. Tunggu, ada artikel lain yang mengatakan bahawa anda harus menggunakan Redux untuk menguruskan keadaan untuk apl baharu anda. Pemula boleh mengaitkan artikel ini. Saya menganggap diri saya seorang perantara perantaraan dan saya masih merasakan cara ini.

Apabila saya cuba memulakan projek React / Redux saya, saya melayari artikel yang tidak terkira mengenai cara membina direktori fail saya: fail dikelompokkan mengikut jenis, dikumpulkan oleh komponen, dikelompokkan oleh domain ... dan lain-lain.

sumber: http://gph.is/2k9DFT4

Saya menyedari bahawa saya terpaksa memulakan suatu tempat. Masa aha akan datang kemudian. Dalam proses ini, saya akan memahami kebaikan dan keburukan setiap pendekatan. Ia boleh diikuti oleh refactoring yang menyakitkan, tetapi ia akan menjadi pelajaran berharga yang dipelajari. Dan saya sedang membina untuk belajar anyways.

Langkah 1: Pilih pendekatan yang dikemukakan dan tekun dengannya

Saya mengikuti tutorial ini.

Pendekatan pembelajaran saya adalah untuk memulakan pengekodan aplikasi saya sendiri dengan mengikuti proses pemikiran penulis. Saya dapati artikel itu menjadi salah satu tutorial yang paling berguna di luar sana. Ia masih boleh menjadi terlalu banyak untuk seseorang yang bermula di React / Redux jadi saya mendokumenkan perjalanan saya dan membuatnya menjadi versi yang dipotong turun dari tutorial.

Langkah 2: Mula kecil

Matlamat saya adalah sangat mudah pada permulaan: membuat senarai artikel yang saya kumpulkan dengan aplikasi agregator berita. Tanggapan dari pangkalan data berita akan menjadi koleksi artikel dengan struktur data berikut.

Berikan senarai artikel mengenai Ethereum

Langkah 3: Pilih boilerplate

Saya menggunakan boilerplate yang dicipta oleh instruktur saya yang indah di Akademi Fullstack. (Saya tidak menangkap kereta api React / Redux di sana. Kohort saya adalah pembelajaran terakhir AngularJS) Saya memilih boilerplate ini kerana menggunakan javascript penuh: React / Redux untuk front end dan Express / Sequelize / PostgreSQL untuk backend. Untuk tujuan latihan ini, saya telah membersihkan sedikit boilerplate untuk orang tanpa Express / Sequelize / PostgreSQL untuk diikuti. Kami hanya akan bekerjasama dengan React / Redux mulai sekarang.

Inilah repo yang mengandungi titik permulaan dan kod selesai untuk latihan ini.

Ini adalah struktur fail.

src /
  komponen /
    ListView.js
    ListRow.js
  bekas /
    ArticlesIndex.js
  perkhidmatan /
    articles.js
  kedai/
    artikel/
      actions.js
      actionTypes.js
      reducer.js
    index.js

Sebelum anda mengikuti tutorial ini, jika istilah seperti tindakan dan reducer tidak berbunyi loceng, saya sangat mengesyorkan anda membaca konsep teras dalam dokumentasi Redux rasmi atau artikel yang saya tulis:

Langkah 4: Mulakan dengan keadaan Redux

Apakah keadaan yang ada di aplikas kami? Kami bercakap tentang aplikasi satu halaman mudah dengan senarai artikel. Kita perlu menyimpan senarai artikel yang diambil dari pelayan. Jika anda melihat articles.js dalam src / services / artikel, anda akan melihat array yang diisi dengan artikel. Oleh kerana tujuan latihan ini adalah untuk mengetahui aliran data arsitektur React / Redux, fungsi getAllArticles () berfungsi terus mengembalikan artikel yang kami perlukan. Di dunia nyata, fungsi ini akan menjadi panggilan asynchronous kepada beberapa API jauh.

Sekarang persoalannya adalah bagaimana untuk menyusun negeri kita. Sambutan dari pelayan (atau dalam kes ini, fungsi getAllArticles) adalah pelbagai objek. Kita boleh meletakkannya di negeri kita.

Tetapi adakah ini cara terbaik untuk model negara? Pertimbangkan senario di mana anda perlu mengemaskini kemasukan artikel, aplikasi akan berulang melalui array untuk mencari berita yang anda cari. Bagaimana jika ukuran array sangat besar? Pendekatan ini tidak akan menjadi sangat baik.

Jika kita strukturkan keadaan kita dengan objek, mengakses artikel menjadi mencari. Untuk membuat artikel, kami boleh menyimpan pelbagai id tambahan.

Langkah 5: Laksanakan aliran data untuk keadaan anda dari awal hingga akhir

Bagaimanakah kita mengemas kini negeri ini? Di sinilah tindakan dan pengurang masuk. Pertimbangkan carta alir ini:

Apakah interaksi pengguna kami? Kami mahu membuat senarai artikel pada beban halaman supaya tidak banyak interaksi. Untuk melakukan ini, kita mulakan dengan komponenDidMount dalam pandangan React. Kami boleh menghantar tindakan untuk mendapatkan artikel dan memberitahu pengurangnya. Pengurangan akan menilai tindakan dan mengemaskini keadaan. Keadaan yang dikemas kini akan mencetuskan komponen untuk membuatnya.

Mari kita mulakan dengan menentukan jenis tindakan aplikasi kami. Ia adalah takrifan mudah untuk mengambil artikel. Kemudian kita boleh menambah lebih banyak definisi, seperti mengemaskini kemasukan atau memotong catatan.

Sekarang mari kita ambil tindakan. Ingat bahawa tindak balas yang kami dapat dari backend adalah pelbagai objek, kami mengubahnya menjadi objek menggunakan key fungsi fungsi.

Reducer menilai objek kosong yang mengandungi jenis tindakan dan muatannya. Ia kemudian menyimpan data di negeri ini.

Langkah 6: Render

Kami akan menyambungkan bekas yang dipanggil ArtikelIndex kepada keadaan artikel. AritcleIndex adalah wadah pintar yang boleh berkomunikasi dengan kedai Redux. Inside ArticleIndex, terdapat komponen bodoh yang disebut ListView, yang ditulis oleh Tal Kol, pengarang tutorial Redux yang saya ikuti. Anda boleh melancarkan pelaksanaan dalam folder komponen.

ListView mengambil artikelById, pelbagai artikel id dan fungsi render. Ia kemudian menjadikan senarai artikel.

Bagaimana kita mendapatkan articlesById dan pelbagai artikel artikel untuk melihat? Berikut adalah kajian semula konsep teras Redux. Pandangan reaktif disambungkan ke keadaan Redux melalui fungsi sambung yang disediakan oleh perpustakaan reaktif-redux.

Inilah kod yang menerangkan gambarajah ini. Di bahagian bawahnya, kami memaparkan keadaan Redux dan menghantar kepada React props. Dalam componentDidMount, kita memanggil loadArticles, yang menghantar tindakan FetchAllArticles. Setelah keadaan dikemas kini dengan artikel, artikelById diluluskan untuk melihat semula oleh petaStateToProps.

Dan itu sahaja! Kami mempunyai senarai artikel dalam pelayar kami!

Langkah 7: Anti-corak di suatu tempat di dalam kod?

Demi aliran data pembelajaran dalam React / Redux, kami telah melupakan konsep Redux yang lain sejauh ini. Komponen reaksi harus mengakses keadaan Redux melalui pemilih. Pemilih biasanya terletak di fail reducer.js. Mereka adalah fungsi tulen yang mengakses keadaan Redux dan mengembalikan beberapa sifat negeri. Dengan pemilihan di tempat, jika anda mengubah salah satu keadaan Redux anda yang memberi kesan kepada lebih daripada satu komponen, anda hanya perlu mengemas kini pemilih.

Inilah pemilih getArticles kami:

Fungsi petaStateToProps dalam ArticleIndex.js menjadi:

Bonus: Ikuti proses pemikiran yang sama dan buat penapis

Dengan senarai artikel, kami boleh menambah sekumpulan operasi yang berlainan. Sebagai contoh, artikel itu semua berita mengenai Ethereum. Mereka dikategorikan kepada dua jenis: berita dari komuniti cryptocurrency dan berita dari media arus perdana. Selepas membuat senarai artikel, saya menambah penapis jenis menggunakan proses pemikiran yang sama.

Bilas, Ulangi, Refak

Learning React / Redux adalah seperti melompat ke dalam lubang kelinci, tetapi ia telah mengubah saya dari seorang yang skeptis menjadi orang percaya. Saya harap artikel ini akan melancarkan pembelajaran anda.

Dari langkah awal bayi, projek pembelajaran saya telah berubah menjadi agregator berita dan trend mengesan aplikasi!

Terima kasih kerana membaca!

Sekiranya anda berada di Steemit, media sosial blockchain (seperti anak cinta Reddit dan Sederhana), jatuh di sini: