Thêm thông tin về người bán vào Redux

Chúng ta đã nói về việc các sản phẩm của chúng ta thực tế được thêm vào ứng dụng bởi những người bán. Hãy hiển thị thông tin về người bán khi thêm một sản phẩm mới.

Hãy mở ứng dụng sản phẩm của chúng ta, trong đó tìm tệp productsSlice.js. Hãy truyền thêm một tham số nữa vào prepare, chúng ta sẽ gọi nó là sellerId và thiết lập nó sau đó cho payload của action. Bây giờ đoạn mã cho prepare của chúng ta sẽ như thế này:

prepare(name, desc, price, amount, sellerId) {
	return {
		payload: {
			id: nanoid(),
			name,
			desc,
			price,
			amount,
			seller: sellerId,
		},
	}
},

Bây giờ chúng ta cần thực hiện một số thay đổi trong tệp form thêm sản phẩm NewProductForm.jsx. Đầu tiên hãy thêm một state cục bộ nữa cho id người bán:

const [sellerId, setSellerId] = useState('')

Sau đó, sau khi khai báo biến dispatch cho useDispatch, thêm mã để lấy slice người bán từ state bằng hook useSelector:

const sellers = useSelector((state) => state.sellers)

Trong các trình xử lý cho trường nhập liệu, hãy thêm một cái nữa:

const onSellerChanged = (e) => setSellerId(e.target.value)

Hãy điều chỉnh onSaveProductClick, thêm sellerId cho action productAdded:

dispatch(productAdded(name, desc, price, amount, sellerId))

Hãy mở ứng dụng sinh viên của bạn. Thêm khả năng nhập thông tin về giảng viên đã thêm sinh viên. Để làm điều này, sau khi nghiên cứu tài liệu bài học, hãy thực hiện thay đổi cho hàm prepare trong tệp studentsSlice.js.

Thực hiện các thay đổi cần thiết trong tệp NewStudentForm.jsx