Gửi thunk từ component trong Redux

Trong bài học này, chúng ta sẽ gửi một thunk để lấy sản phẩm từ React component ProductsList.

Bây giờ hãy mở ứng dụng sản phẩm của chúng ta, và trong đó là tệp ProductsList.jsx. Trước tiên, hãy thêm thunk fetchProducts mà chúng ta đã tạo vào phần nhập khẩu:

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

Chúng ta cũng sẽ cần hook useDispatch để gửi action creator của chúng ta và hook useEffect bởi vì ở đây chúng ta có một hiệu ứng phụ, vì chúng ta đang xử lý với mạng, và đó là một API bên ngoài:

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

Bây giờ, dòng đầu tiên trong mã của hàm ProductsList, trước khi khai báo products, hãy thêm:

const dispatch = useDispatch()

Tiếp theo, khi lấy sản phẩm từ state, chúng ta cũng sẽ trích xuất trạng thái của yêu cầu:

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

Và ngay sau đó, chúng ta sẽ nói với React bằng hook useEffect rằng sau khi component được render, chúng ta cần lấy sản phẩm. Ở đây chúng ta cần trạng thái yêu cầu, bởi vì điều quan trọng là yêu cầu đó chỉ được gửi một lần duy nhất:

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

Bây giờ chúng ta có thể khởi chạy ứng dụng của mình, nhấp vào 'Products' trong menu bên trái. Chúng ta chưa thấy danh sách sản phẩm, nhưng nếu chúng ta mở Redux DevTools, thì ở phần bên trái của cửa sổ, chúng ta sẽ thấy các action được tạo tự động (như tôi đã nói trong bài học trước) products/fetchProducts/pending và fulfilled. Bây giờ hãy nhấp vào action products/fetchProducts/fulfilled và trường payload của nó - đây là danh sách sản phẩm của chúng ta! Hoan hô, tất cả các mắt xích trong chuỗi của chúng ta - máy chủ, cơ sở dữ liệu, máy khách và ứng dụng Redux - đều hoạt động nhịp nhàng và đồng bộ. Nhân tiện, như bạn thấy ở đây còn có thuộc tính meta, trong đó chúng ta thấy trạng thái của yêu cầu.

Hãy lưu ý một điều nữa, bạn có thể gặp trường hợp pending và, do đó, fulfilled sẽ được hiển thị hai lần. Nếu điều đó xảy ra, thì đừng buồn, chúng ta sẽ nói về điều này sau.

Mở ứng dụng quản lý sinh viên của bạn. Mở tệp StudentsList.jsx trong đó. Nhập các hook và thunk cần thiết vào đó theo tài liệu từ bài học.

Sau khi nghiên cứu tài liệu bài học, hãy lấy trạng thái yêu cầu studentStatus, và sau đó, sử dụng useEffect, gửi fetchStudents chỉ với điều kiện là giá trị của studentStatus là 'idle'.

Khởi chạy ứng dụng của bạn, nhấp vào 'Students' trong menu ứng dụng bên trái, và sau đó khởi chạy tiện ích mở rộng Redux DevTools trong trình duyệt, giống như trong bài học này bạn sẽ phải thấy các action với pending và fulfilled (và trong đó payload chứa sinh viên). Hãy khám phá các tab của tiện ích mở rộng.