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

Bagaimana Menggunakan Perpustakaan react-redux

by
Difficulty:BeginnerLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Dika Budiaji (you can also view the original English article)

React adalah sebuah perpustakaan JavaScript untuk membangun user interface yang telah diambil dunia pengembangan web oleh badai. Namun, dalam sebuah komunitas yang memihak pilihan dan fleksibilitas, dapat menjadi sulit untuk mengetahui di mana untuk memulai!

Tidak perlu khawatir-beberapa pola dan modul telah muncul sebagai best practice. Salah satunya adalah Redux untuk mengelola application state.

Dalam video ini dari saya kursus Modern Web Apps dengan React dan Redux, aku akan menunjukkan kepada Anda bagaimana menggunakan perpustakaan react-redux.

Ini adalah best pratice di Redux aplikasi untuk membuat perbedaan antara presentasi komponen dan komponen container. Dalam video ini, saya akan menjelaskan bagaimana cara menggunakan semua itu.

Aku akan menjadi mengacu pada kode yang telah kita buat dalam bagian-bagian awal kursus, tetapi Anda harus dapat mengikuti apa yang saya lakukan. Kalian dapat menemukan kode sumber lengkap untuk kursus pada GitHub.

Bagaimana menggunakan Perpustakaan react-redux

Mengapa menggunakan react-redux?

Di bagian-bagian awal dari kursus ini, kami membangun sebuah aplikasi contoh yang menggunakan React dan Redux. Namun, hampir semua komponen yang kita butuhkan untuk bekerja dengan store, baik dengan membaca state tertentu atau oleh dispatching action dan kembali ke store. Ingat, Redux store memegang semua state untuk seluruh aplikasi Anda. Ini berarti bahwa sebagian besar, jika tidak semua, dari komponen kita perlu untuk dapat mengakses store dalam beberapa cara.

Store code in React Redux

Sejauh ini, kami memiliki sebuah objek global store yang kita dapat mengakses secara langsung di bagian mana kita menetapkan property ke sidebar kita.

Namun, memiliki sebuah global store seperti ini tidak bagus untuk banyak alasan. Salah satu alasan paling sederhana adalah bahwa itu tidak benar-benar global — hal ini hanya dapat diakses dari dalam file ini. Itu berarti bahwa kita harus menggunakannya dari dalam file ini atau kita akan memiliki untuk memulai lewat di sekitar dari file ini ke file lain, yang akan menjadi sangat berantakan.

 Juga, jika kita memiliki banyak nested komponen, ini berarti bahwa jika komponen-kompoenent benar-benar tidak perlu store tetapi satu dari child kompoenet, jadi kita harus menyebarkannya keantara komponen tersebut  karena kebutuhan itu agar bisa passing untuk child komponennnya.

Sekarang akan lebih baik jika ada beberapa cara kita bisa memberikan semua akses komponen kami ke store tanpa variabel global, dan tanpa manual passing disekitar.

Dan sebenarnya adalah, disana ada jalan Kita dapat menggunakan sebuah perpustakaan yang disebut react-redux. Anda dapat membaca sedikit lebih lanjut tentang ide di balik perpuskaan ini jika lebih lanjut mempelajari dokumentasi Redux.

Bagaimana react-redux bekerja

Salah satu gagasan utama di balik perpustkaan ini adalah gagasan presentasi komponen dan komponen container. Pada dasarnya, kita dapat memecah aplikasi kita ke dua set komponen.

Set pertama adalah komponen presentasi. Ini berkaitan dengan bagaimana hal-hal yang terlihat. Komponen ini tidak perlu untuk menyadari Redux sama sekali. Komponen tersebut hanya membaca data dari properti mereka, dan mereka dapat mengubah data dengan menerapkan callback yang kita juga menetapkan sebagai properti.

Container, di sisi lain, menyadari Redux, dan mereka secara khusus subscribe ke Redux state dan dispatch ke Redux action. Kita dapat membuat komponen container dengan hanya membungkus komponen presentasi dengan beberapa petunjuk ini.

Praktis contoh: Membelah komponen Sidebar

Sekarang mari kita menyelam dalam dan melihat bagaimana ini bisa bekerja. Kita akan menggunakan sidebar sebagai contoh komponen yang kita dapat dibagi ke dalam presentasi dan container komponen.

Sekarang, Anda mungkin akan sedikit bingung di sini bagaimana kita akan dibagi sidebar kami menjadi dua komponen terpisah. Tetapi kebenaran adalah bahwa komponen container selalu akan menjadi pembungkus presentasi komponen. Pada kenyataannya, sering kali Anda mungkin memiliki komponen presentasi yang memiliki hanya satu pekerjaan, dan itu dibungkus oleh satu spesifik container komponen. Itulah apa yang akan kita lakukan dengan sidebar.

Instal react-redux

Tentu saja, kita harus mulai dengan memasang Perpustakaan react-redux. Jadi mari kita npm install --save react-redux

Jika sudah telah terinstal, kita dapat lanjut dan impor menggunakan import { Provider } from 'react-redux'; dalam file utama kami, app.js. Dalam file ini, kita benar-benar hanya perlu komponen provider yang diberikan kepada kita oleh react-redux.

Sekarang, provider komponen adalah benar-benar bagian dari react-redix yang akan mengambil store kami dan passing ke komponen yang berbeda. Sebenarnya apa yang terjadi adalah, di belakang layar, provider menggunakan context fitur dari React. Jadi jika Anda memiliki sedikit lebih pengalaman lebih di React dan Anda telah bermain-main dengan context sebelumnya, yang mungkin memberi Anda wawasan ke dalam bagaimana sebenarnya provider bekerja.

Provider benar-benar membuat itu benar-benar, benar-benar sederhana untuk menggunakan store di mana-mana. Yang harus kita lakukan adalah bungkus komponen aplikasi top-level kami penyedia komponen, seperti yang ditunjukkan di sini:

top-level application component wrapped in a Provider component

Dan sekarang aplikasi kita menggunakan react-redux provider .

Menggunakan fungsi connect()

Sekarang mari kita membuka file sidebar kami, dan mari kita impor fungsi connect() dari react-redux. Fungsi connect() memungkinkan kita untuk menentukan properti dan fungsi apa yang kita inginkan container komponen untuk memiliki, dan kemudian kita dapat mengambil definisi itu, menerapkannya ke komponen presentasi, dan mendapatkan sebuah komponen React lengkap.

Sekarang aku mengerti itu terdengar sedikit membingungkan. Jadi mari kita lihat bagaimana hal ini dilakukan.

Existing sidebar component

Komponen presentasi

Keindahan dari sidebar yang sudah kita menulis adalah bahwa itu adalah benar-benar sudah komponen presentasi.

Pertama-tama sidebar kami hanya benar-benar peduli dengan bagaimana hal-hal yang terlihat. Hal itu memberikan kita markup styling, tentu saja, dan ianya tidak menyadari Redux sama sekali. Kami memiliki metode ini bahwa kami menyebutnya showAddDeck, addDeck, dan hideAddDeck, tetapi metode tersebut tahu tentang Redux. Sidebar itu sendiri tidak tahu apa-apa sama sekali tentang Redux. Pada kenyataannya, jika kita ingin mengambil Redux dari proyek ini dan menggunakan beberapa alternatif, kita hanya bisa mengubah definisi fungsi ini dan komponen sidebar ini tidak harus berubah sama sekali. Itu hanya memanggil fungsi-fungsi ini.

Bagaimana itu membaca data? Yah, itu hanya membaca data dari properti bahwa kami telah memberikan itu. Bagaimana mengubah data? Yah, itu hanya memanggil callback yang dari properti. Kami memiliki tiga metode, dan ketika ia memanggil, data  akan berubah di store. Dan akhirnya, tentu saja, ya, itu ditulis dengan tangan. Dan seperti yang Anda lihat dalam beberapa detik, container komponen akan dihasilkan oleh react-redux.

Jadi kita sudah memiliki salah satu dari dua potong yang kita butuhkan: sidebar ini adalah komponen presentasi. Hal berikutnya yang ingin kita lakukan adalah mengambil definisi properti ini bahwa kita memberikan ke sidebar, dan daripada mendefinisikan mereka di sini, kita akan mendefinisikan mereka sebagai bagian dari container komponen kita.

Jadi aku hanya akan menyalin baris-baris berikut:

Lines to copy from Sidebar component code

Dan aku akan ditempel di bagian atas di sini:

Lines pasted at the top of the file

Membuat fungsi pemetaan

Sekarang Properti ini benar-benar baik terbagi menjadi dua set: properti-properti adalah data, dan properti yang berfungsi untuk di panggil, yang melakukan action dan  mengubah store.

Jadi apa yang perlu kita lakukan sekarang adalah membuat dua fungsi yang akan map state ke properti ini. Secara tradisional dalam React, fungsi-fungsi ini disebut mapStateToProps dan mapDispatchToProps.

Jadi langsung saja dan mulai dengan mapStateToProps. Ini adalah fungsi yang akan menerima state terbaru dari store.

Kita hanya perlu untuk mengembalikan sebuah objek, yang akan memiliki dua sifat dan, seperti yang kita sudah lihat, mereka adalah decks dan addingDeck properti. Jadi aku hanya  menyalin dan sisipkan mereka di sini karena ini adalah data yang sama, kita hanya perlu mengkonversi sintaks yang menjadi objek literal sintaks bukan JSX sintaks.

mapStateToProps function

Jadi ini adalah fungsi mapStateToProps kami. Pada dasarnya, ini hanya butuh state saat ini dari store, dan akan mengembalikan data apa pun atau presentasi komponen yang diperlukan. Sehingga dibutuhkan deks dan properti addingDeck, dan sehingga kita mengembalikan keduanya dalam sebuah objek.

Membersihkan kode

Kita bisa melakukan beberapa hal untuk membersihkan ini sedikit. Pertama-tama, kita bisa benar-benar menyingkirkan ini kurung kurawal bahwa blok untuk fungsi ini karena kita hanya memiliki satu statement yang kita perlu kembalikan. Tapi kemudian, karena kita hanya memiliki satu baris, kita bisa menyingkirkan return statement.

Namun, sekarang kita memiliki kurung kurawal di sekitar objek literal, dan JavaScript akan berpikir ini adalah fungsi blok, jadi kami akan membungkus mereka dalam tanda kurung.

Kita dapat mempersingkat ini sedikit lebih, karena kita tidak perlu objek seluruh state, sehingga kita bisa menggunakan sintaks destructuring, dan mengatakan kami hanya ingin properti decks dan addingDeck properti dari objek ini.

Tentu saja, kemudian, di dalam fungsi ini, kita tidak mengatakan state.decks, kita hanya mengatakan deks. Dan kita tidak mengatakan state.addingDeck, kami hanya mengatakan addingDeck. Dan sekarang saya pikir Anda dapat melihat di mana kami going dengan ini — karena kunci dan properti memiliki nama yang sama, kita dapat menyingkirkan salah satu dari mereka dan kita bisa saja mengatakan decks dan addingDeck.

Dan ini adalah versi pendek dari fungsi kita berkat ES6.

Shorter version of mapStateToProps

Jadi sekarang bagaimana tentang mapDispatchToProps? Nah, ini adalah fungsi juga, dan itu akan mengambil dispatch hanya sebagai parameter. Sekarang dispatch, tentu saja, adalah store dispatch fungsi.

Sekali lagi, kita hanya akan mengembalikan sebuah objek literal, jadi jangan lupa tanda kurung yang, dan di dalamnya kita perlu tiga properti yang kita miliki di atas: addDeck, showAddDeck, dan hideAddDeck. Jadi sekarang kita memiliki fungsi yang map fungsi dispatch ke tiga callback yang kita butuhkan untuk sidebar.

mapDispatchToProps function

Jadi sekarang kita memiliki segala sesuatu yang kita perlu membuat container komponen. Kami memiliki dua fungsi yang akan map state objek dalam fungsi dispatch kami ke properti yang membutuhkan fungsi ini. Dan kami memiliki komponen presentasi yang mengharapkan properti ini.

Sekarang, fungsi connect() adalah apa yang dapat kita gunakan untuk menghubungkan kedua pemetaan fungsi dengan komponen presentasi. Dan apa yang akan mengembalikan fungsi connect ini adalah container komponen. Kita tidak benar-benar akan menulis komponen lain di sini-sebaliknya kami melewati ketiga potongan ke fungsi connect(), dan itu akan kembali ke container komponen.

Begitu turun di bagian bawah, bukannya mengekspor sidebar, mari kita ekspor panggilan untuk connect(). Kita akan melewati dua parameter-fungsi mapStateToProps dan mapDispatchToProps- dan connect() akan mengembalikan fungsi baru.

Sekarang apa yang benar-benar diekspor dari file ini adalah tidak sidebar presentasi tetapi sebaliknya container komponen baru kita, yang di luar fungsi ini masih bisa kita sebut sebagai <Sidebar> .

Jadi itu adalah perpustakaan react-redux. Anda dapat memeriksa file sumber di GitHub untuk melihat bagaimana kode bekerja secara penuh.

Watch kursus penuh

Dalam kursus penuh, Modern Web Apps dengan React dan Redux, aku akan menunjukkan kepada Anda bagaimana untuk memulai membangun aplikasi modern web React dan Redux.

Mulai dari nol, Anda akan menggunakan dua pustaka untuk membangun aplikasi web lengkap. Anda akan mulai dengan arsitektur mungkin yang paling sederhana dan perlahan-lahan membangun aplikasi, fitur oleh fitur. Anda akan belajar tentang konsep dasar seperti tooling, reducer, dan routing. Anda juga akan belajar tentang beberapa teknik yang lebih maju seperti komponen yang pintar dan bodoh, komponen murni dan asynchronous action. Pada akhir, Anda akan telah menciptakan sebuah aplikasi lengkap flashcards untuk belajar oleh pengulangan spasi.

Sepanjang jalan, Anda akan mendapatkan kesempatan untuk mempertajam ES6 Anda (ECMAScript 2015) keterampilan dan belajar pola dan modul yang bekerja dengan baik dengan React dan Redux!

Anda juga dapat membangun pada pengetahuan Anda tentang React dengan kursus ini:

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.