Gửi action trong ứng dụng Redux

Bây giờ chúng ta đã có reducer để cập nhật slice chứa reactions. Hiện tại chúng ta cần thêm việc gửi action, action này sẽ được kích hoạt khi người dùng nhấp vào nút reaction. Nhưng trước tiên, để mọi thứ hoạt động hoàn chỉnh, chúng ta cần thực hiện một vài thay đổi.

Hãy mở ứng dụng sản phẩm của chúng ta, và trong đó mở tệp productsSlice.js. Hãy xem định nghĩa initialState. Bạn thấy không? Trong các đối tượng không có thuộc tính reactions. Hãy sửa chữa điều này, bằng cách đặt bộ đếm của mỗi reaction thành 0:

{
	id: '1',
	title: 'Product1',
	desc: 'This is an amazing product',
	price: '300',
	amount: '30',
	reactions: {
		good: 0,
		soso: 0,
		bad: 0,
	},
},

Vào đối tượng thứ hai để khởi tạo, hãy tự thêm thuộc tính reactions. Thuộc tính này chúng ta cũng cần thêm vào bên dưới trong mã cho reducer productAdded, để các sản phẩm mới cũng có chức năng này. Hãy làm điều này cho phương thức prepare của nó:

prepare(title, desc, price, amount, sellerId) {
	return {
		payload: {
			id: nanoid(),
			title,
			desc,
			price,
			amount,
			seller: sellerId,
			reactions: {
				good: 0,
				soso: 0,
				bad: 0,
			},
		},
	}
},

Bây giờ hãy bắt đầu gửi action. Mở tệp UserReactions.jsx, sau đó import vào đó hook useDispatch và reactionClicked:

import { useDispatch } from 'react-redux'
import { reactionClicked } from './productsSlice'

Ở đầu mã trong thân hàm UserReactions dòng đầu tiên (trước const userReactions ... ) hãy viết:

const dispatch = useDispatch()

Và gán cho nút reaction việc gửi reactionClicked khi nhấp, đồng thời chúng ta sẽ truyền id sản phẩm và tên reaction mà người dùng đã nhấp vào:

<button
	key={name}
	type="button"
	className="reaction-button"
	onClick={() =>
		dispatch(reactionClicked({ productId: product.id, reaction: name }))
	}
>
	{image} {product.reactions[name]}
</button>

Bây giờ chúng ta chỉ cần hiển thị component reactions trong giao diện cho các trang của chúng ta. Hãy làm điều này trong tệp ProductsList.jsx trước phần tử Link:

<UserReactions product={product} />

Và tương tự như vậy trước phần tử Link trên trang sản phẩm trong tệp ProductPage.jsx:

<UserReactions product={product} />

Bây giờ, khi mọi thứ đã vào đúng vị trí, chúng ta có thể chạy ứng dụng của mình. Hãy thử nhấp vào các nút reaction. Chúng ta có thể thêm sản phẩm mới và cũng nhấn vào chúng. Bây giờ, bất cứ nơi nào chúng ta nhấp vào các nút reaction, các giá trị đã thay đổi sẽ được hiển thị cho sản phẩm cụ thể đó trên tất cả các trang. Hãy xem trang sản phẩm riêng lẻ (trang mà bạn đã nhấp vào các reaction) và trang danh sách sản phẩm và ngược lại, số lượng reaction cho một sản phẩm cụ thể sẽ giống nhau trên tất cả các trang.

Bài học này là bài học cuối cùng trong chương về làm việc với dữ liệu trong Redux. Chúng ta đã làm việc sâu hơn với dữ liệu trong Redux store và bây giờ đã biết, cách thêm chức năng cần thiết vào ứng dụng và sử dụng dữ liệu trong các component React.

Mở ứng dụng sinh viên của bạn. Trong tệp studensSlice.js, hãy thêm thuộc tính votes với các trường tương ứng vào các đối tượng dùng để khởi tạo. Hãy làm điều này cả cho reducer studentAdded.

Bên trong hàm UserVotes trong tệp UserVotes.jsx, hãy khai báo dispatch cho hook useDispatch và thực hiện gửi action voteClicked khi nhấp vào các nút bình chọn, hãy truyền vào đó id sinh viên và tên vote, tương tự như đã được trình bày trong bài học.

Hiển thị các nút bình chọn trong giao diện cho các component StudentsList và StudentPage.