Thêm logic bổ sung vào ứng dụng Redux

Trong bài học này, chúng ta sẽ thêm thành phần cuối cùng vào ứng dụng của mình. Cụ thể hơn, chúng ta sẽ thêm phản ứng của người dùng vào sản phẩm, những người đã đặt hàng hoặc đọc thông tin về nó.

Hãy mở ứng dụng sản phẩm của chúng ta. Giống như với tên người bán, chúng ta cần hiển thị phản ứng của người dùng ở nhiều vị trí trong ứng dụng. Điều này có nghĩa là chúng ta sẽ cần một thành phần riêng biệt. Vì vậy, hãy bắt đầu bằng cách tạo tệp UserReactions.jsx trong thư mục products. Trước tiên, hãy xác định một đối tượng trong đó chứa các phản ứng của chúng ta:

const reactionObj = {
	good: '+',
	soso: '+/-',
	bad: '-',
}

Và bên dưới, hãy bắt đầu viết hàm chính, mà chúng ta sẽ truyền slice product vào:

export const UserReactions = ({ product }) => {}

Bây giờ, trong dấu ngoặc nhọn, hãy viết thân hàm UserReactions. Để làm điều này, hãy lặp qua các cặp khóa-giá trị của reactionObj bằng map, với mỗi cặp, lấy ký hiệu cho nút ('+', '+/-' hoặc '-') và giá trị số của phản ứng tương ứng (chúng ta sẽ lấy nó từ product trong store theo tên phản ứng):

const userReactions = Object.entries(reactionObj).map(([name, image]) => {
	return (
		<button key={name} type="button" className="reaction-button">
			{image} {product.reactions[name]}
		</button>
	)
})

Và sau đó, ở cuối mã hàm, hãy trả về phần giao diện với các nút userReactions:

return <div>{userReactions}</div>

Và cũng hãy thêm một chút kiểu dáng vào index.css:

.reaction-button {
	margin-right: 10px;
	margin-bottom: 10px;
}

Nếu điều này có vẻ hơi rối rắm, đừng lo lắng, bạn sẽ hiểu rõ hơn nhiều ở phần sau.

Mở ứng dụng sinh viên của bạn. Ứng dụng của bạn sẽ có chức năng cho người dùng chọn trong số các sinh viên lớp trưởng và đội trưởng đội thể thao. Vì vậy, sau khi nghiên cứu tài liệu bài học, hãy tạo tệp UserVotes.jsx trong thư mục students. Ở đầu tệp, tạo đối tượng votesObj, trong đó bạn sẽ có hai thuộc tính - leader và captain, với giá trị GL và TC, làm ký hiệu cho các nút.

Bên dưới trong tệp, sau khi xác định đối tượng votesObj, hãy viết mã cho hàm UserVotes, tương tự như tài liệu trong bài học này.