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

Memulai dengan Redux: Menghubungkan Redux dengan React

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Febri Ardian Sanjoyo (you can also view the original English article)

Ini adalah bagian ketiga dari rangkaian Memulai dengan Redux dan dalam tutorial ini, kita akan belajar cara menghubungkan Redux store dengan React. Redux adalah library independen yang berfungsi dengan semua library & framework front-end populer. Dan itu bekerja dengan sempurna dengan React karena pendekatan fungsionalnya.

Anda tidak perlu mengikuti bagian-bagian sebelumnya dari seri ini agar tutorial ini masuk akal. Jika Anda di sini untuk belajar tentang menggunakan React dengan Redux, Anda dapat mengambil Quick Recap di bawah ini dan kemudian periksa kode dari bagian sebelumnya dan mulai dari sana.

Quick Recap

Di posting pertama, kita belajar tentang alur kerja Redux dan menjawab pertanyaan, Mengapa Redux?. Kita membuat aplikasi demo yang sangat dasar dan menunjukkan kepada Anda bagaimana berbagai komponen Redux — action, reducer, dan store— terhubung.

Di posting sebelumnya, kita mulai membuat aplikasi daftar kontak yang memungkinkan Anda menambahkan kontak dan kemudian menampilkannya sebagai daftar. Redux store dibuat untuk daftar kontak kita dan kita menambahkan beberapa reducer dan action. Kita berusaha mengirim action dan mengambil status baru menggunakan metode penyimpanan seperti store.dispatch() dan store.getState().

Di akhir artikel ini, Anda akan belajar

  1. perbedaan antara komponen kontainer dan komponen presentasi
  2. tentang library react-redux
  3. cara mengikat react dan redux menggunakan connect()
  4. cara mengirim action menggunakan mapDispatchToProps
  5. cara mengambil status menggunakan mapStateToProps

Kode untuk tutorial tersedia di GitHub di react-redux-demo repo. Ambil kode dari cabang v2 dan gunakan itu sebagai titik awal untuk tutorial ini. Jika Anda penasaran ingin tahu bagaimana tampilan aplikasi pada akhir tutorial ini, cobalah cabang v3. Mari kita mulai.

Merancang Hierarki Komponen: Smart vs Dumb Component

Ini adalah konsep yang mungkin pernah Anda dengar sebelumnya. Tapi mari kita lihat sekilas perbedaan antara smart and dumb components. Ingat bahwa kita telah membuat dua direktori terpisah untuk komponen, satu bernama containers/, dan components/ lainnya. Manfaat dari pendekatan ini adalah logika perilaku dipisahkan dari pandangan.

Komponen presentasi dikatakan smart karena mereka khawatir tentang bagaimana hal-hal(things) terlihat. Mereka dipisahkan dari logika bisnis aplikasi dan menerima data dan callback dari komponen induk secara eksklusif melalui alat peraga. Mereka tidak peduli apakah aplikasi Anda terhubung ke toko Redux jika datanya berasal dari negara bagian lokal dari komponen induk.

Komponen container, di sisi lain, berurusan dengan bagian behavior dan harus berisi markup DOM dan style yang sangat terbatas. Mereka meneruskan data yang perlu diberikan ke komponen dumb sebagai alat peraga.

Saya telah membahas topik ini secara mendalam di tutorial lain, Stateful vs. Stateless Components dalam React.

Teruskan, mari kita lihat bagaimana kita akan mengatur komponen kita.

Designing component Hierarchy

Komponen Presentasi

Berikut adalah komponen presentasional yang akan kita gunakan dalam tutorial ini.

components/AddContactForm.jsx

Ini adalah form HTML untuk menambahkan kontak baru. Komponen menerima onputChange dan onFormSubmit callback sebagai alat peraga. Event onInputChange ditrigger ketika nilai input berubah dan onFormSubmit ketika formulir sedang dikirim.

components/ContactList.jsx

Komponen ini menerima array objek kontak sebagai alat bantu dan karenanya nama ContactList. Kami menggunakan metode Array.map() untuk mengekstrak detail kontak individu dan kemudian meneruskan data tersebut ke <ContactCard />.

components/ContactCard.jsx

Komponen ini menerima objek kontak dan menampilkan nama dan gambar kontak. Untuk aplikasi praktis, mungkin masuk akal untuk menghosting JavaScript images di cloud.

Komponen Container

Kita juga akan membangun komponen container barebone.

containers/Contacts.jsx

Fungsi returnContactList() mengambil array objek kontak dan meneruskannya ke komponen ContactList. Sejak returnContactList() mengambil data dari store, kita akan membiarkan logika itu kosong untuk saat ini.

containers/AddContacts.jsx

Kita telah membuat tiga metode pengendali barebone yang sesuai dengan tiga action. Mereka semua mengirim action untuk memperbarui state. Dalam metode render, kita telah meninggalkan logika untuk menampilkan/menyembunyikan form karena kita perlu fetch state.

Sekarang mari kita lihat bagaimana mengikat react dan redux bersama

react-redux Library

Binding react tidak tersedia di Redux secara default. Anda perlu menginstal library tambahan yang disebut react-redux terlebih dahulu.

Library hanya mengekspor dua API yang perlu Anda ingat, komponen <Provider /> dan fungsi urutan tinggi yang dikenal sebagai connect().

Komponen Provider

Library seperti Redux perlu membuat data store dapat diakses ke seluruh pohon komponen React mulai dari komponen root. Pola Provider memungkinkan library untuk meneruskan data dari atas ke bawah. Kode di bawah ini menunjukkan bagaimana Provider secara ajaib menambahkan status ke semua komponen di component tree.

Demo Code

Seluruh aplikasi harus memiliki akses ke store. Jadi, kita membungkus penyedia di sekitar komponen aplikasi dan kemudian menambahkan data yang kita butuhkan ke konteks tree. Keturunan komponen kemudian memiliki akses ke data.

connect() Method

Sekarang setelah kita menyediakan store untuk aplikasi kita, kita perlu menghubungkan React ke store. Satu-satunya cara Anda dapat berkomunikasi dengan store adalah dengan mengirim action dan dengan mengambil kembali state. Kita sebelumnya telah menggunakan store.dispatch() untuk mengirim action dan store.getState() untuk mengambil snapshot terbaru dari state. connect() memungkinkan Anda melakukan hal ini, tetapi dengan bantuan dua metode yang dikenal sebagai mapDispatchToProps dan mapStateToProps. Saya telah menunjukkan konsep ini dalam contoh di bawah ini:

Code Demo

mapStateToProps dan mapDispatchToProps mengembalikan objek dan kunci objek ini menjadi penyangga komponen yang terhubung. Misalnya, state.contacts.newContact dipetakan ke props.newContact. Creator action addContact() dipetakan ke props.addContact.

Tetapi agar ini berfungsi, Anda butuh baris terakhir dalam cuplikan kode di atas.

Alih-alih mengekspor komponen AddContact secara langsung, kami mengekspor komponen yang terhubung. Sambungan menyediakan addContact dan newContact sebagai alat peraga untuk komponen .

Bagaimana Menghubungkan React dan Redux?

Selanjutnya, kita akan membahas langkah-langkah yang perlu Anda ikuti untuk menghubungkan React dan Redux.

Instal react-redux Library

Instal library react-redux jika Anda belum melakukannya. Anda dapat menggunakan NPM atau Yarn untuk menginstalnya.

Sediakan Store ke Komponen Aplikasi Anda

Buat store nya dulu. Kemudian, buat objek store dapat diakses ke pohon komponen Anda dengan meneruskannya sebagai prop ke <Provider />.

index.js

Hubungkan React Kontainer ke Redux

Fungsi koneksi digunakan untuk mengikat kontainer React ke Redux. Apa itu artinya Anda dapat menggunakan fitur koneksi untuk:

  1. berlangganan ke store dan petakan state nya ke properti Anda
  2. mengirim action dan memetakan callback pengiriman ke dalam properti Anda

Setelah Anda menghubungkan aplikasi Anda ke Redux, Anda dapat menggunakan this.props untuk mengakses keadaan saat ini dan juga untuk mengirim tindakan. Saya akan menunjukkan proses pada komponen AddContact. AddContact perlu mengirim three action dan mendapatkan status two properties dari store. Mari kita lihat kodenya.

Pertama, impor connect ke AddContact.jsx.

Kedua, buat dua metode mapStateToProps dan mapDispatchToProps.

mapStateToProps menerima state store sebagai argumen. Ini mengembalikan objek yang menggambarkan bagaimana keadaan store dipetakan ke dalam properti Anda. mapDispatchToProps mengembalikan objek serupa yang menggambarkan bagaimana tindakan pengiriman dipetakan ke props Anda.

Akhirnya, kita menggunakan connect untuk mengikat komponen AddContact ke dua fungsi sebagai berikut:

Perbarui Container Components untuk Menggunakan Props

Comment's props sekarang dilengkapi untuk membaca keadaan dari store dan dispatch action. Logika untuk handleInputChange, handleSubmit dan showAddContactBox harus diperbarui sebagai berikut:

Kami telah mendefinisikan metode handler. Tetapi masih ada satu bagian yang hilang — pernyataan kondisional di dalam fungsi render.

Jika isHidden salah, form akan ditampilkan. Jika tidak, tombol akan diberikan.

Menampilkan Kontak

Kita telah menyelesaikan bagian yang paling menantang. Sekarang, yang tersisa hanyalah menampilkan kontak ini sebagai daftar. Penampung Contact adalah tempat terbaik untuk logika itu.

Kita telah melalui prosedur yang sama yang kita ikuti di atas untuk menghubungkan komponen Contact dengan store Redux. Fungsi mapStateToProps memetakan objek penyimpanan ke alat bantu contactList. Kita kemudian menggunakan connect untuk mengikat nilai props ke komponen Contact. Argumen kedua untuk menghubungkan adalah null karena kita tidak memiliki action yang akan dikirim. Itu melengkapi integrasi aplikasi kita dengan keadaan store Redux.

Apa selanjutnya?

Pada posting berikutnya, kita akan melihat lebih dalam pada midleware dan mulai mengirimkan action yang melibatkan mengambil data dari server. Bagikan pendapat Anda di komentar!

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.