Mengirim Thunk dari Komponen di Redux

Pada pelajaran ini kita akan mengirim thunk untuk mengambil produk dari komponen React ProductsList.

Sekarang mari buka aplikasi kita dengan produk, dan di dalamnya file ProductsList.jsx. Pertama-tama mari tambahkan impor thunk fetchProducts, yang telah kita buat:

import { selectAllProducts, fetchProducts } from './productsSlice'

Kita juga akan membutuhkan hook useDispatch untuk mengirim action creator kita dan hook useEffect karena di sini kita memiliki efek samping, karena kita berurusan dengan jaringan, dan ini sudah merupakan API eksternal:

import { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'

Sekarang baris pertama dalam kode fungsi ProductsList sebelum deklarasi products mari tambahkan:

const dispatch = useDispatch()

Selanjutnya saat mengambil produk dari state kita juga akan mengekstrak status permintaan:

const products = useSelector(selectAllProducts)
const productStatus = useSelector((state) => state.products.status)

Dan segera setelah itu beri tahu React menggunakan hook useEffect, bahwa setelah komponen dirender kita perlu mengambil produk. Di sini kita akan membutuhkan status permintaan, karena penting bagi kita bahwa permintaan seperti itu dikirim hanya sekali:

useEffect(() => {
	if (productStatus === 'idle') {
		dispatch(fetchProducts())
	}
}, [productStatus, dispatch])

Sekarang kita dapat menjalankan aplikasi kita, klik pada 'Products' di menu sebelah kiri. Kita belum akan melihat daftar produk, tetapi jika kita buka Redux DevTools kita, maka di bagian kiri jendela kecil kita akan muncul action yang digenerate secara otomatis (seperti yang saya katakan di pelajaran sebelumnya) products/fetchProducts/pending dan fulfilled. Sekarang mari klik action products/fetchProducts/fulfilled dan pada fieldnya payload - itulah daftar produk kita! Hore, semua mata rantai kita - server, basis data, klien dan aplikasi Redux - bekerja selaras dan bersama-sama. Omong-omong, seperti yang Anda lihat di sini juga ada properti meta, di mana kita melihat status permintaan.

Mari perhatikan satu hal lagi, Anda mungkin mengalami bahwa pending dan, akibatnya, fulfilled akan ditampilkan dua kali. Jika ini terjadi, jangan kecewa, kita akan membicarakannya nanti.

Buka aplikasi Anda dengan siswa. Buka di dalamnya file StudentsList.jsx. Impor ke dalamnya hook yang diperlukan dan thunk sesuai materi dari pelajaran.

Setelah mempelajari materi pelajaran, dapatkan status permintaan studentStatus, lalu, menggunakan useEffect, kirim fetchStudents hanya dengan syarat bahwa nilai studentStatus adalah 'idle'.

Jalankan aplikasi Anda, klik di menu aplikasi sebelah kiri pada 'Students', lalu jalankan ekstensi Redux DevTools di browser, seperti di pelajaran ini Anda harus melihat action dengan pending dan fulfilled (dan di dalamnya payload dengan siswa). Jelajahi tab-tab ekstensi.