Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React

Getting Started With Redux: Learn by Example

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by M Hadi Sasmito (you can also view the original English article)

Redux membantu Anda mengelola negara dengan mendirikan negara di tingkat global. Dalam tutorial sebelumnya, kami telah senang melihat arsitektur Redux dan komponen integral Redux seperti tindakan, tindakan pencipta, Toko, dan reducer.

Dalam posting ini kedua dari seri, kami akan meningkatkan pemahaman kita tentang Redux dan membangun di atas apa yang kita sudah tahu. Kita akan mulai dengan menciptakan sebuah aplikasi Redux realistis — daftar kontak — itu lebih kompleks daripada counter dasar. Ini akan membantu Anda memperkuat pemahaman Anda satu toko dan beberapa konsep reducer yang saya diperkenalkan dalam tutorial sebelumnya. Kemudian kemudian kita akan bicara tentang mengikat negara Anda Redux dengan aplikasi bereaksi dan praktek-praktek terbaik yang harus Anda pertimbangkan sekaligus menciptakan sebuah proyek dari awal.

Namun, tidak apa-apa jika Anda belum membaca posting pertama-Anda masih harus mampu mengikuti bersama selama Anda tahu dasar-dasar Redux. Kode untuk tutorial tersedia di repo, dan Anda dapat menggunakannya sebagai titik awal.

Membuat daftar kontak menggunakan Redux

Kita akan membangun sebuah daftar kontak dasar dengan fitur berikut:

  • Menampilkan semua kontak
  • mencari kontak
  • mengambil semua kontak dari server
  • Tambahkan kontak baru
  • mendorong data kontak baru ke server

Berikut adalah aplikasi apa yang kami akan terlihat seperti:

Getting Started With Redux Final View of the Contact List
Produk akhir-daftar kontak View


Getting Started With Redux Final View of the Contact Form
Produk akhir — Tambah Kontak Lihat

Meliputi segala sesuatu di satu peregangan sulit. Jadi dalam posting ini kita akan fokus pada bagian Redux menambahkan kontak baru dan menampilkan kontak baru ditambahkan. Dari perspektif Redux, kita akan menjadi initializing negara, menciptakan toko, menambahkan reducer dan tindakan, dll.

Dalam tutorial berikutnya, kita akan mempelajari bagaimana untuk menghubungkan bereaksi dan Redux dan pengiriman Redux tindakan dari bereaksi front-end. Di bagian akhir, kita akan beralih fokus kami menuju membuat API panggilan menggunakan Redux. Ini termasuk mengambil kontak dari server dan membuat permintaan server sambil menambahkan kontak baru. Selain itu, kami juga akan membuat fitur bar pencarian yang memungkinkan Anda menelusuri semua kontak yang sudah ada.

Membuat sketsa pohon negara

Anda dapat men download aplikasi react-redux  demo dari repositori GitHub saya. Clone repo dan menggunakan cabang v1 sebagai titik awal. Cabang v1 sangat mirip dengan template buat-bereaksi-app. Satu-satunya perbedaan adalah bahwa saya telah menambahkan beberapa direktori kosong mengatur Redux. Berikut ini adalah struktur direktori.

Atau, Anda dapat membuat sebuah proyek baru dari awal. Bagaimanapun, Anda akan perlu memiliki diinstal boilerplate dasar bereaksi dan redux sebelum Anda bisa memulai.

Ini adalah ide yang baik untuk memiliki sketsa kasar dari pohon negara pertama. Menurut pendapat saya, ini akan menghemat banyak waktu dalam jangka panjang. Berikut adalah sketsa kasar dari pohon mungkin negara.

Toko kami harus memiliki dua sifat — contects dan ui. Kontak properti mengurus semua negara yang terkait dengan kontak, sedangkan ui menangani UI-spesifik negara. Ada tidak ada aturan keras di Redux yang mencegah Anda dari menempatkan objek ui sebagai negara sub kontak. Merasa bebas untuk mengatur negara Anda dengan cara yang terasa bermakna untuk aplikasi Anda.

Kontak properti memiliki dua sifat yang bersarang di dalamnya-contactlist dan newContact. Contactlist adalah sebuah array kontak, sedangkan newContact sementara toko rincian kontak sementara formulir kontak ini dipenuhi. Aku akan menggunakan ini sebagai titik awal untuk membangun aplikasi  daftar kontak kami.

Bagaimana mengatur Redux

Redux tidak memiliki pendapat tentang bagaimana struktur Anda aplikasi Anda. Ada beberapa pola yang populer di luar sana, dan dalam tutorial ini, saya akan secara singkat berbicara tentang beberapa dari mereka. Tapi Anda harus memilih salah satu pola dan tongkat dengan itu sampai Anda memahami bagaimana semua potongan terhubung bersama-sama.

Pola yang paling umum yang Anda temukan adalah struktur file dan folder yang bergaya Rails. Anda akan memiliki beberapa tingkat atas direktori seperti yang di bawah ini:

  • komponen: tempat untuk menyimpan bodoh bereaksi komponen. Komponen ini tidak peduli apakah Anda menggunakan Redux atau tidak.
  • wadah: sebuah direktori untuk komponen bereaksi cerdas yang mengirimkan tindakan untuk toko Redux. Mengikat antara redux dan bereaksi akan mengambil tempat di sini.
  • tindakan: pencipta tindakan akan masuk ke dalam direktori ini.
  • reducer: peredam masing-masing mendapatkan file individu, dan Anda akan menempatkan semua logika peredam dalam direktori ini.
  • menyimpan: logika untuk inisialisasi negara dan mengkonfigurasi toko akan pergi di sini.

Gambar di bawah menunjukkan bagaimana aplikasi kita mungkin terlihat jika kita mengikuti pola ini:

Organising Folder structure in Redux

Gaya Rails harus bekerja untuk aplikasi kecil dan menengah. Namun, ketika aplikasi Anda tumbuh, Anda dapat mempertimbangkan bergerak ke arah pendekatan domain-gaya atau alternatif lain populer yang berhubungan erat dengan domain-gaya. Di sini, setiap fitur akan memiliki direktori sendiri, dan segala sesuatu yang berkaitan dengan fitur (domain) akan di dalamnya. Gambar di bawah membandingkan dua pendekatan, rel-gaya di sebelah kiri dan domain-gaya di sebelah kanan.

Comparison of two popular techniques for organising Redux and React

Untuk sekarang, pergi ke depan dan membuat direktori untuk komponen, wadah, Toko, reducer dan tindakan. Mari kita mulai dengan toko.

Satu toko, beberapa Reducers

Mari kita membuat sebuah prototipe untuk toko dan peredam terlebih dahulu. Dari contoh kami sebelumnya, ini adalah bagaimana kami toko akan terlihat:

Switch pernyataan memiliki tiga kasus yang sesuai dengan tiga tindakan yang kita akan menciptakan. Berikut adalah penjelasan singkat tentang apa tindakan dimaksudkan untuk.

  • HANDLE_INPUT_CHANGE: Tindakan ini akan dipicu ketika pengguna input nilai-nilai baru ke dalam form Kontak.
  • ADD_NEW_CONTACT: Tindakan ini akan dikirim bila pengguna mengirimkan formulir.
  • TOGGLE_CONTACT_FORM: Ini adalah tindakan UI yang mengurus menampilkan/menyembunyikan formulir kontak.

Meskipun pendekatan naif ini bekerja, sebagai aplikasi tumbuh, menggunakan teknik ini akan memiliki beberapa kekurangan.

  1. Kami menggunakan peredam tunggal. Meskipun peredam tunggal terdengar oke untuk sekarang, bayangkan memiliki semua logika bisnis Anda di bawah satu peredam sangat besar.
  2. Kode di atas tidak mengikuti struktur Redux yang telah kita bahas di bagian sebelumnya.

Untuk mengatasi masalah tunggal peredam, Redux memiliki metode yang disebut combineReducers yang memungkinkan Anda membuat beberapa reducer dan kemudian menggabungkan mereka ke dalam mengurangi fungsi tunggal. CombineReducers fungsi ini meningkatkan keterbacaan. Jadi aku akan membagi peredam menjadi dua-contactsReducer dan uiReducer.

Dalam contoh di atas, createStore menerima argumen kedua opsional yang merupakan keadaan awal. Namun, jika kita akan membagi reducers, kita dapat memindahkan initialState seluruh ke lokasi file baru, mengatakan reducers/initialState.js. Kami kemudian akan mengimpor subset dari initialState ke setiap file peredam.

Membelah Reducer

Mari kita merestrukturisasi kami kode untuk memperbaiki masalah yang kedua. Pertama, buat sebuah file baru yang disebut store/createStore.js dan tambahkan kode berikut:

Selanjutnya, buat peredam akar di reducers/index.js sebagai berikut:

Akhirnya, kita perlu membuat kode untuk contactsReducer dan uiReducer.

reducers/contactsReducer.js

reducers/uiReducer.js

Ketika Anda membuat reducers, selalu menjaga berikut dalam pikiran: peredam harus memiliki nilai default untuk keadaan, dan selalu perlu kembali sesuatu. Jika peredam gagal untuk mengikuti spesifikasi ini, Anda akan mendapatkan kesalahan.

Karena kita telah membahas banyak kode, kita akan melihat perubahan-perubahan yang kami buat dengan pendekatan kami:

  1. Panggilan combineReducers telah diperkenalkan untuk mengikat bersama reducer split.
  2. Keadaan objek ui akan ditangani oleh uiReducer dan keadaan kontak oleh contactsReducer.
  3. Untuk menjaga reducer murni, penyebaran operator telah digunakan. Sintaks dot tiga adalah bagian dari spread operator. Jika Anda tidak nyaman dengan sintaks penyebaran, Anda harus mempertimbangkan menggunakan perpustakaan seperti Immutability.js.
  4. Nilai awal tidak lagi ditetapkan sebagai argumen opsional untuk createStore. Sebaliknya, kami telah menciptakan sebuah file terpisah untuk itu disebut initialState.js. Kita mengimpor initialState dan kemudian menetapkan keadaan default dengan melakukan negara = initialState.ui.

Negara inisialisasi

Berikut adalah kode untuk reducers/initialState.js file.

Tindakan dan tindakan pencipta

Mari kita tambahkan beberapa tindakan dan tindakan pencipta untuk menambahkan penanganan perubahan bentuk, menambahkan kontak baru, dan toggling negara UI. Jika Anda ingat, pencipta tindakan adalah hanya fungsi yang mengembalikan tindakan. Tambahkan kode berikut di actions/index.js.

Setiap tindakan yang perlu kembali jenis properti. Tipe adalah seperti sebuah kunci yang menentukan peredam yang akan dipanggil dan bagaimana keadaan akan diperbarui dalam menanggapi tindakan itu. Muatan opsional, dan Anda dapat benar-benar menyebutnya apapun yang Anda inginkan.

Dalam kasus kami, kami telah menciptakan tiga tindakan.

TOGGLE_CONTACT_FORM tidak perlu muatan karena setiap kali tindakan dipicu, nilai ui.isContactFormHidden akan toggled. Tindakan-tindakan yang bernilai Boolean tidak memerlukan Muatan.

HANDLE_INPUT_CHANGE tindakan dipicu ketika nilai bentuk perubahan. Jadi, misalnya, bayangkan bahwa pengguna mengisi bidang email. Tindakan kemudian menerima "email" dan "bob@example.com" sebagai masukan, dan muatan yang diserahkan kepada peredam adalah objek yang terlihat seperti ini:

Peredam menggunakan informasi ini untuk memperbarui sifat yang relevan negara newContact.

Pengiriman tindakan dan berlangganan ke toko

Langkah logis berikutnya adalah untuk mengirimkan tindakan. Setelah tindakan yang dikirim, negara perubahan dalam menanggapi itu. Untuk pengiriman tindakan dan mendapatkan pohon diperbarui negara, Redux menawarkan tindakan toko tertentu. Mereka adalah:

  • Dispatch(Action): salah satu tindakan yang berpotensi memicu perubahan negara.
  • getState (): kembali pohon keadaan saat ini aplikasi Anda.
  • subscriber(Listener): perubahan pendengar yang akan dipanggil setiap kali sebuah tindakan dikirim dan beberapa bagian dari pohon keadaan berubah.

Kepala ke index.js file dan impor configureStore fungsi dan tiga tindakan yang kita buat sebelumnya:

Selanjutnya, buat objek toko dan menambahkan pendengar yang log pohon negara setiap kali tindakan Dikirim:

Akhirnya, pengiriman beberapa tindakan:

Jika semuanya bekerja tepat, Anda harus melihat ini di konsol pengembang.

Redux store being logged in developer console

That's it! Di konsol pengembang, Anda dapat melihat toko Redux log, sehingga Anda dapat melihat bagaimana perubahan setelah setiap tindakan.

Ringkasan

Kami telah menciptakan sebuah aplikasi Redux telanjang-tulang untuk kami awesome daftar kontak aplikasi. Kita pelajari tentang reducers, membelah reducer untuk membuat aplikasi struktur cleaner, dan menulis tindakan kita untuk bermutasi toko.

Menjelang akhir posting, kami berlangganan ke toko menggunakan metode store.subscribe(). Secara teknis, ini bukan cara terbaik untuk mendapatkan sesuatu dilakukan jika Anda akan menggunakan bereaksi dengan Redux. Ada lebih dioptimalkan cara untuk menghubungkan bereaksi front-end dengan Redux. Kita akan membahas di tutorial selanjutnya.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.