Menghantar Thunk dari Komponen dalam Redux

Dalam pelajaran ini, kita akan menghantar thunk untuk mendapatkan produk dari komponen React ProductsList.

Sekarang mari buka aplikasi produk kami, dan dalamnya fail ProductsList.jsx. Pertama, mari tambahkan import untuk thunk fetchProducts yang kami buat:

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

Kami juga memerlukan hook useDispatch untuk menghantar action creator kami dan hook useEffect kerana di sini kami mempunyai kesan sampingan, kerana kami berurusan dengan rangkaian, dan itu sudah menjadi API luaran:

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

Sekarang baris pertama dalam kod fungsi ProductsList sebelum pengisytiharan products mari tambahkan:

const dispatch = useDispatch()

Seterusnya, apabila mendapatkan produk dari keadaan kami juga akan mengekstrak status permintaan:

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

Dan segera selepas itu, beritahu React menggunakan hook useEffect, bahawa selepas komponen dipaparkan kami perlu mendapatkan produk. Di sini kami memerlukan status permintaan, kerana adalah penting untuk kami bahawa permintaan sedemikian dihantar hanya sekali:

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

Sekarang kami boleh menjalankan aplikasi kami, klik pada 'Products' dalam menu di sebelah kiri. Kami belum akan melihat senarai produk, tetapi jika kami pergi ke Redux DevTools kami, maka di sebelah kiri tetingkap kecil kami akan melihat yang dijana secara automatik (seperti yang saya katakan dalam pelajaran lepas) tindakan products/fetchProducts/pending dan fulfilled. Sekarang mari klik pada action products/fetchProducts/fulfilled dan pada medannya payload - inilah senarai produk kami! Horey, semua pautan kami dalam rantaian - pelayan, pangkalan data, pelanggan dan aplikasi Redux - berfungsi dengan teratur dan bersama-sama. Dengan cara itu, seperti yang anda lihat di sini juga ada sifat meta, di mana kami melihat status permintaan.

Mari kita perhatikan satu perkara lagi, anda mungkin mengalami situasi di mana pending dan, oleh itu, fulfilled akan ditunjukkan dua kali. Jika ya, jangan kecewa, kita akan membincangkannya kemudian.

Buka aplikasi pelajar anda. Buka fail StudentsList.jsx di dalamnya. Import hook yang diperlukan dan thunk mengikut bahan dari pelajaran.

Setelah mengkaji bahan pelajaran, dapatkan status permintaan studentStatus, dan kemudian, menggunakan useEffect, hantar fetchStudents hanya dengan syarat bahawa nilai studentStatus adalah 'idle'.

Jalankan aplikasi anda, klik dalam menu aplikasi di sebelah kiri pada 'Students', dan kemudian jalankan sambungan Redux DevTools dalam pelayar, seperti dalam pelajaran ini anda sepatutnya melihat tindakan dengan pending dan fulfilled (dan dalamnya payload dengan pelajar). Terokai tab sambungan.