მონაცემთა რედაქტირების ფორმა Redux-ში

ახლა ჩვენ გვაქვს reducer-ი მონაცემების შესაცვლელად store-ში. ამ გაკვეთილზე ჩვენ შევქმნით ფორმას, რ whose დახმარებით ჩვენ შევძლებთ პროდუქტის მონაცემების რედაქტირებას.

გავხსნათ ჩვენი პროდუქტების აპლიკაცია და შევქმნათ ფოლდერში products ფაილი EditProductForm.jsx. კომპონენტის EditProductForm შექმნა ანალოგიური იქნება NewProductForm-ისა, გარდა რამდენიმე განსხვავებისა, რაზეც ჩვენ შევჩერდებით. ამიტომ დააკოპირეთ მთლიანად კოდი NewProductForm.jsx-დან და ჩასვით ის შექმნილ ფაილში EditProductForm.jsx. ახლა დავიწყოთ თანმიმდევრობით.

ამოიღეთ იმპორტიდან nanoid, აქ ჩვენ არ გვჭირდება id-ის გენერირება. შეცვალეთ იმპორტი productAdded productUpdated-ით, რადგან აქ ჩვენ გამოვიყენებთ action-ს განახლებისთვის, და არა დამატებისთვის პროდუქტის.

შემდეგ შევცვალოთ ჩვენი კომპონენტის ფუნქციის სახელი NewProductForm-დან EditProductForm-ზე.

სანამ ჩვენ შევქმნით ლოკალურ state-ებს ფუნქციაში EditProductForm name-ისთვის, desc-ისთვის, price-ისთვის და amount-ისთვის, მოდით ჩავსვათ კიდევ რამდენიმე სტრიქონი კოდი. როგორც უკვე აღვნიშნეთ, აქ ჩვენ არ გვჭირდება id-ის გენერირება. ახლა ჩვენი ამოცანაა მისი მიღება შესაცვლელი პროდუქტის მონაცემებიდან. ჩვენ უკვე გავაკეთეთ ეს პროდუქტის ცალკე გვერდის შექმნისას. ასე რომ, მივიღოთ id hook-ის useParams დახმარებით, შემდეგ კი ვიპოვოთ საჭირო პროდუქტი, hook-ის useSelector გამოყენებით (არ დაგავიწყდეთ ორივე hook-ის იმპორტი ფაილის დასაწყისში):

products/EditProductForm.jsxlet params = useParams()
const { productId } = params

const product = useSelector((state) =>
  state.products.find((product) => product.id === productId)
)

ამის შემდეგ შევცვალოთ ბლოკი ლოკალური state-ების დეკლარაციით. ახლა ჩვენ გვჭირდება როგორც საწყისი მნიშვნელობა მივანიჭოთ მათ store-დან მიღებული პროდუქტის მონაცემები. აი პირველი state-ი ასე გამოიყურება, დანარჩენი სამი თავად გადააკეთეთ:

products/EditProductForm.jsxconst [name, setName] = useState(product.name)

useDispatch-ისთვის ცვლადის გამოცხადების შემდეგ მოდით დავამატოთ კიდევ ერთი სტრიქონი კოდი ამჯერად hook-ისთვის useNavigate. ჩვენ გამოვიყენებთ მას პროდუქტის გვერდზე დასაბრუნებლად, როდესაც მომხმარებელი შეინახავს ფორმაში შეტანილ ცვლილებებს:

products/EditProductForm.jsxconst navigate = useNavigate()

ასევე შემოვიტანოთ ეს hook-ი ფაილის დასაწყისში:

products/EditProductForm.jsximport { useNavigate, useParams } from 'react-router-dom'

შემდეგ გვაქვს დამმუშავებლები შეყვანის ველებისთვის. მათ შემდეგ კი ჩვენ გვჭირდება ფუნქციის onSaveProductClick შესწორება. ახლა მასში კლიკის დროს ჩვენ ვიგზავნით ექშენს productUpdated მიღებული id-ით და შეცვლილი მონაცემებით ობიექტის სახით. შემდეგ დავამატოთ ჩვენი navigate, განახლებული პროდუქტის გვერდზე გადასასვლელად:

products/EditProductForm.jsxconst onSaveProductClick = () => {
  if (name && desc && price && amount) {
    dispatch(
      productUpdated({
        id: productId,
        name,
        desc,
        price,
        amount,
      })
    );
    
    navigate(`/products/${productId}`);
  }
}

დარჩა მხოლოდ ჩვენს დასაბრუნებელ ვერსტკაში ვიპოვოთ სტრიქონი:

products/EditProductForm.jsx<h2>Add a New Product</h2>

და შევცვალოთ იგი:

products/EditProductForm.jsx<h2>Edit Product</h2>