Form và State cục bộ trong Redux

Trong các bài học trước, chúng ta đã học cách lấy dữ liệu từ store và hiển thị chúng trong React component. Trong bài học này, chúng ta sẽ bắt đầu thêm dữ liệu mới. Chúng ta sẽ làm điều này bằng cách sử dụng biểu mẫu, sau khi điền vào, người bán có thể thêm sản phẩm mới.

Hãy bắt đầu với việc không phải lúc nào cũng có lý do để sử dụng state toàn cục Redux. Có những trường hợp chúng ta có thể tạo ra các state cục bộ cho nhu cầu của mình. Chúng ta sẽ gọi các state cục bộ là các state được sử dụng bên trong một component cụ thể cho các nhu cầu kỹ thuật. Ví dụ, để ẩn hoặc hiển thị một cái gì đó khi nhấn nút.

Trong trường hợp của chúng ta, người dùng sẽ nhập dữ liệu vào biểu mẫu và, tất nhiên, chúng ta sẽ cần các state cho việc này. Chúng ta có thể sử dụng state Redux toàn cục, nhưng điều đó không có ý nghĩa, vì các state của chúng ta sẽ chỉ hoạt động ở một nơi duy nhất trong ứng dụng cho biểu mẫu thêm sản phẩm. Quy tắc chính cần tuân theo là - không được để các state cục bộ hoạt động bên ngoài component mà chúng được tạo, và không được liên quan đến store trong bất kỳ trường hợp nào. Thực hành như vậy thường được sử dụng khi tạo biểu mẫu.

Hãy mở thư mục products của ứng dụng sản phẩm của chúng ta, tạo trong đó tệp NewProductForm.jsx và import hook useState vào đó:

import { useState } from 'react'

Bây giờ hãy tạo chính component với biểu mẫu và khai báo trong đó các state thông thường, như chúng ta đã từng làm trước đây trong React. Chúng ta cần các state để làm việc với tên, mô tả, giá và số lượng sản phẩm:

export const NewProductForm = () => {
	const [name, setName] = useState('')
	const [desc, setDesc] = useState('')
	const [price, setPrice] = useState(0)
	const [amount, setAmount] = useState(0)
}

Tiếp theo, thêm xử lý tiêu chuẩn cho mỗi trường khi người dùng nhập dữ liệu:

const onNameChanged = (e) => setName(e.target.value)
const onDescChanged = (e) => setDesc(e.target.value)
const onPriceChanged = (e) => setPrice(e.target.value)
const onAmountChanged = (e) => setAmount(e.target.value)

Và sau đó trả về trong component phần giao diện với tiêu đề và biểu mẫu trống:

return (
	<div>
		<h2>Thêm Sản Phẩm Mới</h2>
		<form>
		</form>
	</div>
)

Hãy mở ứng dụng sinh viên của bạn. Tạo tệp NewStudentForm.jsx trong thư mục students. Khai báo trong component NewStudentForm các state cục bộ cho các trường bạn cần, viết phần xử lý cho mỗi trường, như đã trình bày trong bài học.

Hãy trả về trong component NewStudentForm phần giao diện, chứa tiêu đề và một biểu mẫu trống.