Persiapan dengan Redux Thunk

Negara adalah bagian besar dari aplikasi reaksi, itulah sebabnya Redux biasanya dipasangkan dengannya. Data itu sering berasal dari database, yang membutuhkan permintaan dan respons. Untuk beberapa aplikasi, komunikasi ini dapat konstan. Ini bisa sulit untuk dikelola hanya dalam komponen reaksi.

Ini juga memperkenalkan beberapa masalah baru - apa yang terjadi jika memuat perlahan, atau tidak memuat sama sekali? Setiap komponen yang berurusan dengan data asinkron harus mengandung logika untuk menangani skenario ini.

'Thunk' adalah konsep yang dapat membantu dengan situasi ini. Setiap Thunk adalah fungsi yang mengembalikan fungsi lain. Fungsi itu kemudian dapat dipanggil pada titik selanjutnya, seperti panggilan balik. Jika kita dapat mengirim Bibir alih-alih objek tindakan, kita dapat menambahkan beberapa logika ekstra dalam reaksi terhadap peristiwa lain.

Redux Thunk adalah perpustakaan yang berada di antara tindakan yang dikirim dan peredam. Ketika ia melihat bahwa Thunk dikirim, ia meneruskan beberapa metode ke dalam fungsi yang dikembalikan yang dapat digunakan untuk mengirim tindakan lebih lanjut, seperti acara kesuksesan atau kesalahan.

• 20 plugin jquery brilian

Dalam tutorial ini, kami akan menggunakannya untuk membantu menarik data dari server daripada dari file JSON, bekerja dengan Photoshare. - Aplikasi komentar foto yang ditenagai oleh Redux.

Punya proyek situs baru, tetapi perlu tetap sederhana? Ini panduan kami untuk yang terbaik Pembangun Situs Web dan hosting web. layanan. Berbagi file dengan orang lain? Dapatkan itu penyimpanan awan Baik.

Unduh file untuk tutorial ini.

01. Instal Ketergantungan

Ada dua bagian untuk proyek ini - situs ujung depan dan server belakangnya berjalan. Sedangkan tutorial berfokus pada ujung depan, kita perlu server yang berjalan untuk mengambil foto. Unduh file proyek dan instal dependensi untuk situs dan server. Jalankan server untuk keduanya dan biarkan berjalan di latar belakang.

 / * satu terminal di dalam / situs * /
& gt; benang
& gt; Benang Mulai
/ * Satu terminal di dalam / server * /
& gt; benang
& gt; MULAI BENANG 

02. Mengatur middleware

Redux Thunk adalah a middleware. - Fungsionalitas yang berada di antara tindakan dan peredam yang dapat mengubah cara tindakan tersebut. Redux mendukung beberapa set middleware yang mencakup seluruh aplikasi. Mereka ditambahkan ketika toko dibuat menggunakan menyusun metode. Tambahkan middleware ke CreateStore. Metode dalam index.js.

 Impor {ApplyMiddleware, Compose}
dari "redux";
Impor Thunk dari "Redux-Thunk";
[...]
const store = createstestore (
RootReducer,
menyusun(
TerapkanMiddleware (Thunk),
devtools.
)
); 

03. Mengatur pembuat tindakan

Hal pertama yang perlu kita lakukan sekarang adalah memuat foto ke galeri. Seperti tindakan reguler, kita perlu pencipta tindakan untuk berbagai negara bagian yang akan diambil oleh panggilan asinkron. Sebagian besar akan memiliki Mulailah , keberhasilan dan kesalahan tindakan. Ini biarkan Redux tahu apa yang sedang dilakukan Javascript. Dalam Tindakan / foto / Foto.js , atur tiga pencipta tindakan untuk negara-negara yang berbeda ini.

 ekspor const loadgallerystart = () = & gt; ({
Jenis: load_gallery_start});
ekspor const loadgallerysuccess =
Foto = & gt; ({
Jenis: load_gallery_success,
Foto.
});
ekspor const loadgalleryError = () = & gt; ({
Jenis: load_gallery_error}); 

04. Buat Thunk untuk Memuat

Thunks bekerja persis sama dengan pencipta tindakan. Kami masih mengirimkan nilai kembali, tetapi kali ini mengembalikan fungsi alih-alih objek. Middleware yang kami atur sebelumnya akan melewati metode pengiriman ke fungsi yang dikembalikan. Ini memungkinkan kami untuk mengirim lebih banyak tindakan ke redux setelah pengiriman awal. Membuat loadgallery. Metode yang mengembalikan fungsi. Untuk saat ini, minta pengiriman tindakan untuk menunjukkan bahwa galeri masih memuat.

 ekspor const loadgallery = () = & gt;
Dispatch = & gt; {
pengiriman (loadgallerystarts ());
}; 

05. Muatkan data dari server

Kami sekarang siap untuk mulai mengambil dari server yang kami atur di awal. Kita dapat melakukan ini dengan menggunakan Axios. - Paket yang dirancang untuk bekerja dengan janji di berbagai browser. Impor Axios. dan membuat permintaan untuk foto-foto di dalam loadgallery. . Jika janji itu memutuskan, mengirim tindakan kesuksesan, dan jika tidak mengirim tindakan kesalahan. Dengan itu, struktur Thunk selesai.

 Impor Axios dari "Axios";
[...]
Kembalikan Axios.
.get ("http: // localhost: 3001 / foto")
. Kemudian (respons = & gt; pengiriman (
loadgallerysuccess (response.data)))
.catch (() = & gt; pengiriman (
loadGalleryError ())); 

06. Kirim The Thunk

The Thunk tidak akan melakukan apa-apa sampai sudah dikirim. Kita dapat melakukannya dalam komponen reaksi seperti tindakan lainnya. Waktu yang tepat untuk mulai memuat foto adalah ketika pengguna melihat galeri utama. Kita bisa menggunakan reaksi komponendidmount. Metode Lifecycle sebagai pemicu, setelah memeriksa galeri belum dimuat. Dalam Komponen / Wadah / Galeri / Galeri.js Pengiriman A. loadgallery. tindakan dengan menambahkannya ke MapDispatchtoprops. dan menyebutnya di dalam komponendidmount. .

 ComponentDidMount () {
Jika (! this.props.photosloaded) {
this.props.loadgallery ();
}
}
ekspor mapdispatchtoprops =
 Dispatch = & gt; ({
loadgallery: () = & gt;
pengiriman (loadgallery ()),
}); 

07. Tambahkan foto tentang Sukses

Ketika foto-foto kembali dari server, kami mengirimkan a Load_gallery_success. tindakan dengan foto. Kita perlu mendapatkan ini ke dalam negara melalui Foto. peredam. Menuju ke Reducers / Foto / Foto.js dan tambahkan kasus untuk tindakan kesuksesan. Payload berisi semua foto sebagai array. Setelah keadaan diperbarui, pemilih foto melewati foto-foto ke komponen galeri untuk ditampilkan.

 case load_gallery_success:
return action.photos; 

08. Mengatur UI

Saat ini, foto-foto tiba-tiba muncul setelah dimuat. Pada koneksi yang lebih lambat, pengguna akan melihat layar kosong sampai permintaan selesai, jika pernah melakukannya. Tindakan yang kami kirim untuk memuat foto juga dapat dijemput di UI Reducer untuk menjaga antarmuka tetap terkini dengan apa yang terjadi. Perbarui bendera pemuatan dan kesalahan dalam peredam UI di Reducers / UI / UI.js .

 case load_gallery_error:
kembali {... nyatakan,
Memuat: Salah, Kesalahan: Benar};
case load_gallery_start:
kembali {... nyatakan,
Memuat: Benar, Kesalahan: Salah};
case load_gallery_success:
kembali {... nyatakan,
Memuat: Salah}; 

09. Tambahkan pemuatan dan pemilih kesalahan

Seperti halnya foto galeri itu sendiri, kita perlu pemilih untuk mendapatkan berbagai nilai negara UI dari redux. Kita dapat melewati ini ke galeri, yang kemudian akan membuat elemen yang berbeda jika salah satunya benar. Di Selectors / UI / UI.js , tambahkan beberapa fungsi untuk mengeluarkan nilai.

 ekspor const isgalleryerredred =
 negara = & gt; negara.ui.Error;
ekspor const isgalleryloading =
 negara = & gt; state.ui.loading; 

10. Tambahkan Data ke GalleryContainer

Dengan pemilih siap, mereka sekarang dapat ditambahkan ke Galeri komponen kontainer. Menambahkannya di sini berarti bahwa komponen yang bertanggung jawab untuk menampilkan galeri tidak perlu tahu tentang bagaimana data telah tiba. Menuju ke wadah / galeri / galeri.js dan tambahkan pemilih ke MapStateTrops. . Buat konstanta untuk nilai-nilai untuk membantu menampilkan keadaan pada langkah berikutnya.

 const {error, loading,
 Foto} = this.props;
[...]
ekspor const mapstateetoprops =
 negara = & gt; ({
GALAT: isGalleryErreded (Negara),
Memuat: isGallyloading (negara bagian),
 }); 

11. Tampilkan Pemuatan dan Kesalahan Negara

Sementara kami memiliki kesalahan dan memuat alat peraga, saat ini tidak ada UI untuk menunjukkan kapan mereka aktif. Alat peraga ini adalah nilai Boolean, yang berarti kita dapat mengaktifkan tampilan komponen ketika mereka benar. Perbarui Metode Render untuk memastikan & lt; error & gt; dan & lt; memuat & gt; komponen membuat alih-alih galeri saat dibutuhkan.

 if (error) {
Kembali & lt; error / & gt ;;
}
Jika (memuat) {
Kembali & lt; memuat / & gt;
} 

12. Ambil galeri lagi

Dengan galeri dimuat, kita dapat beralih ke foto individu. Mengklik ke salah satu foto dan menyegarkan halaman tidak memuat kembali foto, karena tidak ada instruksi pada halaman ini belum memuat galeri. Buka wadah / foto / foto.js dan memuat galeri di komponendidmount. seperti di Galeri komponen. Itu Photosloaded. Periksa tidak akan mencoba memuat foto lagi jika mereka sudah dimuat dalam galeri.

 Jika (! This.props.photosloaded) {
this.props.loadgallery ();
} 

13. Tambahkan komentar baru

Pengguna dapat mengklik foto di mana mereka ingin meninggalkan komentar. Komponen presentasi foto akan menjalankan addnewcomment. fungsi prop ketika ini terjadi. Di dalam addnewcomment. Fungsi, hitung titik di mana pengguna mengklik di dalam foto. Server memerlukan nilai persentase bulat integer saat disimpan.

 Foto Const = E.Target
 .getboundingClientrect ();
const top = e.clientx - photo.left;
const kiri = e.clienty - photo.top;
const toppc = math.round ((atas /
 photo.width) * 100);
const leftpc = math.round ((kiri /
 photo.height) * 100); 

14. Beri tahu redux tentang komentar itu

Dengan posisi dihitung, kita kemudian perlu memberi tahu Redux tentang komentar sehingga dapat menampilkan formulir komentar. Sudah ada tindakan yang diatur untuk menambahkan komentar baru di layar. Menambahkan addnewcomment. ke MapDispatchtoprops. dan menyebutnya setelah kami menghitung posisi klik.

 this.props.addnewcomment (
 TOPPC, LeftPC);
[...]
ekspor mapdispatchtoprops =
 Dispatch = & gt; ({
addnewcomment: (atas, kiri) = & gt;
pengiriman (addnewcomment (atas, kiri)),
});

15. Beri tahu foto tentang komentar baru

Ketika informasi komentar baru diteruskan ke Redux, kita perlu meneruskannya ke dalam komponen presentasi foto. Ini memungkinkannya untuk menunjukkan formulir pada posisi itu. Temukan .. getnewcomment. Selector, tambahkan ke MapStateTrops. dan lulus prop & lt; foto & gt; .

 ekspor const mapstateetoprops =
 (negara, alat peraga) = & gt; ({
Comment: GetNewComment (State),
});
& lt; foto [...] Newcomment = {
 this.props.newcomment} / & gt; 

16. Panggil Thunk dalam komentar

Mengklik foto sekarang akan memunculkan formulir komentar baru. Ini adalah komponen yang terhubung sendiri. Ketika formulir dikirimkan, itu memanggil a Kirim Komentar fungsi prop dan dilewati. Ini adalah bibir yang akan kita buat. Buka Kontainer / Newcomment / Newcomment.js dan tambahkan Thunk ke MapDispatchtoprops. . Lulus yang menopang ke komponen presentasi yang diberikan.

 & lt; Newcomment [...]
 kirimkan = {kirimkan} / & gt;
ekspor mapdispatchtoprops =
 Dispatch = & gt; ({
Kiriman: Komentar = & gt; pengiriman(
Kiriman (komentar))
});

17. Kumpulkan konten untuk Thunk

The Thunk untuk menambahkan komentar baru memiliki struktur yang sama dengan pengambilan galeri, termasuk tindakan awal, kesuksesan, dan kesalahan. Ada argumen ekstra yang diteruskan ke dalamnya - The GetState. fungsi. Ini memungkinkan akses langsung ke keadaan saat ini untuk mengambil data darinya. Buat .. Kirim Komentar Thunk in. Tindakan / Newcomment / Newcomment.js . Setiap komentar dikaitkan dengan foto dan pengguna. Untuk tutorial ini, ID pengguna dikodekan ke dalam Pengguna peredam.

 Kiriman Kiriman Ekspor = Komentar
 = & gt; (Pengiriman, GetState) = & gt; {
pengiriman (kirimkan commentstart ());
Consent CurrentFotooid =
GetCurrentPhotoid (GetState ());
Pengguna Const =
GetCurrentUser (GetState ());
const {kiri, atas} =
getnewcomment (GetState ());
}; 

18. Posting permintaan

Dengan semua data yang diperlukan, kami dapat mengirimkan komentar. Axios memiliki A. pos metode untuk berurusan dengan POS permintaan, dengan argumen kedua menjadi data untuk mengirim permintaan itu. Tambahkan permintaan ke break, lewat data dalam kasus ular untuk mencocokkan apa yang diharapkan server.

 Kembalikan Axios
.pos(
"http: // localhost: 3001 / komentar", {
user_id: user.id,
photo_id: CurrentFtoid,
komentar,
kiri,
puncak
}) 

19. Menangani kesuksesan dan kesalahan

Jika janji dari Axios memutuskan atau menolak, kita perlu memberi tahu aplikasi tentang hal itu. Jika berhasil diselesaikan, server akan mengembalikan konten komentar. Kita harus meneruskannya dengan tindakan kesuksesan. Jika ditolak, tembak tindakan kesalahan. Perbarui janji dengan kemudian dan menangkap blok.

. Kemudian (({data: {
 ID, komentar, kiri, atas}}) = & gt;
pengiriman(
kirimkanommentsuccess (
ID, komentar, kiri, atas,
Pengguna, CurrentPhotoid)
)
)
.catch (() = & gt; pengiriman (
 kirimkancommentiError ())); 

20. Tambahkan komentar ke foto

Saat ini, begitu komentar berhasil ditambahkan, itu akan dihapus dari layar tetapi tidak terlihat sampai halaman menyegarkan. Kami dapat memperbarui reducer foto untuk mengambil komentar baru dan menambahkannya ke array komentar, untuk ditampilkan seperti sisanya. Buka Reducer / Foto / Foto.js dan tambahkan case untuk menangani tindakan. Buat salinan negara untuk memastikan kami tidak secara tidak sengaja memutar keadaan yang ada.

 Kasus kirim_comment_success:
const {id, komentar, atas, kiri,
pengguna, fotoid} = action.payload;
const newstate = json.parse (
Json.stringify (state));
const photo = newstate.find (
Foto = & gt; photo.id === fotoid);
Foto.Beri foto ({{
ID, komentar, kiri, top, pengguna
});
Kembalikan NewState; 

21. Sembunyikan komentar lain

Terakhir, jika komentar lain terbuka dan pengguna ingin menambahkan komentar baru, UI terlalu berantakan. Kita harus menyembunyikan kotak komentar jika komentar baru sedang disusun. Kita dapat menghubungkan yang ada Add_new_comment. tindakan untuk menghapus komentar nilai. Menuju ke reducer / ui / ui.js dan tambahkan kasing untuk itu.

 case add_new_comment:
kembali {
...negara,
Commentopen: Tidak terdefinisi
}; 

Artikel ini awalnya diterbitkan dalam edisi 283 dari Majalah Desain Web Kreatif Desainer web . Beli masalah 283 di sini atau berlangganan desainer web di sini .

Artikel terkait:

• 5 apis javascript yang luar biasa
• Mengembangkan komponen reaksi yang dapat digunakan kembali
• 9 dari kerangka kerja JavaScript terbaik