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:

products/productsSlice.jsprepare(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:

products/NewProductForm.jsxconst [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:

products/NewProductForm.jsxconst 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:

products/NewProductForm.jsxconst onSellerChanged = (e) => setSellerId(e.target.value)

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

products/NewProductForm.jsxdispatch(productAdded(name, desc, price, amount, sellerId))