Bermula dengan Redux: Belajar dengan contoh

Dalam jawatan kedua siri ini, kita akan meningkatkan pemahaman kita tentang Redux dan membina di atas apa yang sudah kita ketahui. Kami akan bermula dengan membuat aplikasi Redux yang realistik -senarai kenalan -yang lebih kompleks daripada kaunter asas. Ini akan membantu anda mengukuhkan pemahaman anda tentang kedai tunggal dan konsep pengurangan yang saya diperkenalkan dalam tutorial sebelumnya. Kemudian kami akan bercakap tentang mengikat keadaan Redux anda dengan aplikasi React dan amalan terbaik yang perlu anda pertimbangkan semasa membuat projek dari awal.

Walau bagaimanapun, tidak mengapa jika anda belum membaca jawatan pertama -anda masih boleh mengikuti sepanjang anda mengetahui asas -asas Redux. Kod untuk tutorial boleh didapati di repo, dan anda boleh menggunakannya sebagai titik permulaan.

Membuat senarai kenalan menggunakan Redux

Kami akan membina senarai hubungan asas dengan ciri -ciri berikut:

• Paparkan semua kenalan
• Cari kenalan
• mengambil semua kenalan dari pelayan
• Tambahkan kenalan baru
• Tolak data kenalan baru ke pelayan

Inilah permohonan kami akan kelihatan seperti:

Meliputi segala -galanya dalam satu peregangan adalah sukar. Oleh itu, dalam jawatan ini kita akan memberi tumpuan kepada hanya bahagian Redux untuk menambah kenalan baru dan memaparkan kenalan yang baru ditambah. Dari perspektif Redux, kita akan memulakan keadaan, mewujudkan kedai, menambah pengurangan dan tindakan, dll.

Dalam tutorial seterusnya, kami akan belajar bagaimana untuk menyambungkan React dan Redux dan menghantar tindakan Redux dari front-end React. Di bahagian akhir, kami akan mengalihkan tumpuan kami ke arah membuat panggilan API menggunakan Redux. Ini termasuk mengambil kenalan dari pelayan dan membuat permintaan pelayan sambil menambah kenalan baru. Selain itu, kami juga akan membuat ciri bar carian yang membolehkan anda mencari semua kenalan yang ada.

Buat lakaran pokok negeri

Anda boleh memuat turun aplikasi demo React-Redux dari repositori GitHub saya. Klon repo dan gunakan cawangan V1 sebagai titik permulaan. Cawangan V1 sangat mirip dengan template create-react-app. Satu -satunya perbezaan ialah saya telah menambah beberapa direktori kosong untuk mengatur Redux. Inilah struktur direktori.

 .<br> ├── Pakej.json<br> ├── awam<br> ├── Readme.md<br> ├── Src<br> │ ├── Tindakan<br> │ ├── App.js<br> │ ├── Komponen<br> │ ├── bekas<br> │ ├── index.js<br> │ ├── Reducers<br> │ └── Kedai<br> └── benang<br>

Sebagai alternatif, anda boleh membuat projek baru dari awal. Sama ada cara, anda perlu memasang boilerplate reaksi asas dan redux sebelum anda boleh memulakan.

Adalah idea yang baik untuk mempunyai lakaran kasar pokok negeri terlebih dahulu. Pada pendapat saya, ini akan menjimatkan banyak masa dalam jangka masa panjang. Berikut adalah lakaran kasar pokok keadaan yang mungkin.

 const initialState = {<br> Kenalan: {<br> senarai kenalan: [],<br> NewContact: {<br> Nama: '',<br> nama keluarga: '',<br> E -mel: '',<br> Alamat: '',<br> Telefon: ''<br> },<br> ui: {<br> // Semua keadaan berkaitan UI di sini. contohnya: Sembunyikan/tunjukkan modal,<br> // kotak semak togol dll.<br> }<br> }<br> }<br><br>

Kedai kami perlu mempunyai dua hartanah -Combinereducers yang membolehkan anda membuat pelbagai pengurangan dan kemudian menggabungkannya ke dalam fungsi pengurangan tunggal. Fungsi Combinereducers meningkatkan kebolehbacaan. Oleh itu, saya akan membahagikan pengurangan ke dalam dua cangkuk yang digunakan untuk menguruskan keadaan peringkat komponen dalam aplikasi React anda.

Dalam semangat yang sama, Redux telah memperkenalkan beberapa cangkuk yang berbeza untuk membolehkan kita melaksanakan tugas -tugas biasa (menghantar tindakan, mendapatkan keadaan, dan sebagainya) di dalam komponen berfungsi semasa menulis kod minimum. Cangkuk ini mula -mula ditambah dalam React Redux 7.1. Sebagai contoh, untuk menghantar tindakan dan mendapatkan pokok negeri, Redux menyediakan cangkuk berikut:

• UseSelector: Dapatkan pokok negeri atau cawangan statistik

Sekarang, dengan cangkuk ini, kita boleh refactor kod di atas untuk ini sebaliknya:

 // import lain di sini<br><br> // mengimport cangkuk redux<br> import {usedIspatch, useselector} dari 'react-redux'<br><br> // mengembalikan fungsi penghantaran dari cangkuk<br> const dispatch = usedIsPatch ()<br><br> // panggilan getstore () untuk membuat objek kedai<br> const store = getStore ();<br><br> // Dapatkan Pokok Negeri Menggunakan UseSelector<br> const state = useselector (state => state)<br><br> // Mendapat cawangan UI negeri<br> const ui = useselector (state => state.ui)<br><br> / * mengembalikan iscontactformHidden pulangan palsu */<br> penghantaran (toggleContactForm ());<br> / * mengembalikan iscontactformHidden pulangan palsu */<br> penghantaran (toggleContactForm ());<br> / * mengemas kini keadaan kenalan. Objek NewContact */<br> Dispatch (HandleInputChange ('E -mel', 'manjunath@example.com'))<br><br> berhenti berlangganan ();<br>

Jika semuanya berfungsi dengan betul, anda harus melihatnya di konsol pemaju.

Itu sahaja! Dalam konsol pemaju, anda dapat melihat kedai Redux yang dilog masuk, jadi anda dapat melihat bagaimana ia berubah selepas setiap tindakan.

Ringkasan

Kami telah mencipta aplikasi Redux yang terdedah untuk aplikasi senarai kenalan hebat kami. Kami belajar tentang pengurangan, memisahkan pengurangan untuk menjadikan struktur aplikasi kami lebih bersih, dan menulis tindakan untuk bermutasi kedai.

Menjelang akhir jawatan, kami melanggan kedai menggunakan kaedah store.subscribe() . Secara teknikal, ini bukan cara terbaik untuk menyelesaikan sesuatu jika anda akan menggunakan React dengan Redux. Terdapat lebih banyak cara yang dioptimumkan untuk menyambungkan front-end React dengan Redux. Kami akan melindungi mereka dalam tutorial seterusnya.

Atas ialah kandungan terperinci Bermula dengan Redux: Belajar dengan contoh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!