Gửi action và hook useDispatch trong Redux

Chúng ta đã triển khai gần như tất cả các thành phần cần thiết cho việc vận hành ứng dụng Redux. Chỉ còn lại việc tìm hiểu cách gửi action từ React component. Hãy bắt đầu.

Mở ứng dụng sản phẩm của chúng ta. Trong form của component NewProductForm, chúng ta có một nút để lưu dữ liệu sản phẩm mới. Hãy gán một trình xử lý sự kiện click cho nó. Giả sử khi click vào nó, trình xử lý onSaveProductClick sẽ được kích hoạt:

<button type="button" onClick={onSaveProductClick}>
	save
</button>

Khi tạo sản phẩm mới, chúng ta sẽ cần một id mới cho nó. Chúng ta sẽ tạo ra id đó bằng thư viện nổi tiếng nanoid. Nhân tiện, không cần cài đặt nó, vì nó đã đi kèm với gói RTK. Hãy thêm nanoid vào phần import:

import { nanoid } from '@reduxjs/toolkit'

Chúng ta cũng nhớ rằng cách duy nhất để thay đổi state - đó là gọi phương thức dispatch, mà store có và truyền vào đối tượng action. Để truy cập phương thức này, chúng ta sẽ sử dụng React-Redux hook useDispatch. Hãy import nó:

import { useDispatch } from 'react-redux'

Trong code của hàm NewProductForm, hãy khai báo một hằng số dispatch cho nó ngay sau khi chúng ta khai báo các hằng số cho các state cục bộ của mình:

const dispatch = useDispatch()

Chúng ta cũng cần import action creator productAdded, mà chúng ta đã có từ bài học trước:

import { productAdded } from './productsSlice'

Bây giờ chúng ta có thể viết chính hàm xử lý onSaveProductClick. Hãy thực hiện điều này trước lệnh return:

const onSaveProductClick = () => {}

Bên trong hàm, chúng ta gọi dispatch, tạo đối tượng action, vào thuộc tính payload của nó, chúng ta sẽ đưa id đã tạo, tên, mô tả, giá và số lượng sản phẩm. Tất cả dữ liệu này chúng ta lấy từ các state cục bộ. Đồng thời, ở đầu chúng ta kiểm tra trong điều kiện xem tất cả các trường đã được điền chưa - chỉ trong trường hợp này mới gọi dispatch. Cuối cùng của code hàm, chúng ta trả các state cục bộ về trạng thái ban đầu:

const onSaveProductClick = () => {
	if (name && desc && price && amount) {
		dispatch(
			productAdded({
				id: nanoid(),
				name,
				desc,
				price,
				amount
			})
		)

		setName('')
		setDesc('')
		setPrice(0)
		setAmount(0)
	}
}

Bây giờ hãy chạy ứng dụng của chúng ta, nhập dữ liệu vào các trường form và nhấn nút lưu. Hoan hô, phía dưới trang đã xuất hiện một sản phẩm mới. Mở Redux DevTools, và trong đó mở tab Inspector, chúng ta thấy rằng bên trái ngoài @@INIT còn có action của chúng ta products/productAdded. Và ở phần bên phải chúng ta có thể nhấp vào các tab Action và State, chuyển đổi giữa @@INIT và products/productAdded. Bây giờ chúng ta thấy rằng sản phẩm mới của chúng ta được thêm vào. Cũng trong tab Action chúng ta thấy action, được tạo tự động bằng createSlice (hãy nhấp vào, ví dụ, Raw). Hoan hô: chúng ta không phải viết nó ra bằng tay.

Mở ứng dụng sinh viên của bạn, sau đó mở file NewStudentForm.jsx, gán vào nút lưu một trình xử lý sự kiện click.

Viết tất cả các import cần thiết và viết hàm xử lý onSaveStudentClick, áp dụng phương thức dispatch như được trình bày trong bài học.

Chạy ứng dụng, nhập vào các trường form dữ liệu và nhấn vào nút lưu. Đảm bảo rằng ở phía dưới trang đã thêm vào một sinh viên mới.

Mở Redux DevTools và đi qua các tab Action và State, đảm bảo rằng đối tượng mới với sinh viên được thêm vào. Xem đối tượng action, đã được tạo ra cho bạn, gửi nó trong câu trả lời cho bài tập này.