პროდუქტის მონაცემების შეცვლა Redux store-ში

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

გავხსნათ ჩვენი პროდუქტების აპლიკაცია და წავიდეთ ფაილში productsSlice.js. დავიწყოთ იმით, რომ ჩვენ გვჭირდება products სლაისისთვის ჩავწეროთ კიდევ ერთი reducer, რომელიც გაეშვება პროდუქტის განახლებისას. დავარქვათ მას productUpdated და დავამატოთ ველში reducers reducer productAdded-ის შემდეგ. ასევე გადავცეთ მას პარამეტრები state და action, რომელზედაც, როგორც გვახსოვს, მუშაობს reducer:

reducers: {
	productAdded(state, action) {
		state.push(action.payload)
	},
	productUpdated(state, action) {},
},

ახლა მოდით ვიფიქროთ, რა მონაცემები დაგვჭირდება პროდუქტის განახლებისთვის. უპირველეს ყოვლისა - ეს არის id, მისი მეშვეობით ჩვენ შევძლებთ ვიპოვოთ საინტერესო პროდუქტი store-ში. დანარჩენი მონაცემები - სახელი, აღწერა, ფასი და რაოდენობა იქნება ჩვენთვის ცვლილებისთვის. ყველა ეს მნიშვნელობა ჩვენ მივიღებთ action ობიექტის payload თვისებიდან, რომელიც ჩვენამდე მოვა, და, თუ ჩვენ მას ხელით დავწერდით, მაშინ ის გამოიყურებოდა ისე, როგორც ნაჩვენებია ქვემოთ. გაითვალისწინეთ, რომ მოსალოდნელი მნიშვნელობა payload თვისებისა - არის ერთი არგუმენტი, ამიტომ ჩვენ აქ გადავცემთ ობიექტს (ამაზე ჩვენ ვისაუბრებთ შემდგომში):

{
	type: 'products/productUpdated',
	payload: {id, name, desc, price, amount}
}

ძირითადი მომენტების გარკვევის შემდეგ, ახლა ჩვენ შეგვიძლია ჩავწეროთ ფიგურულ ფრჩხილებში კოდი productUpdated-ისთვის. ჯერ მივიღოთ action ობიექტიდან შეცვლილი მონაცემები:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
},

ახლა ჩვენ ვიპოვით მიღებული id-ის მიხედვით პროდუქტს, რომელიც საჭიროებს ცვლილებას:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
	const desiredProduct = state.find(product => product.id === id)
},

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

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
	const desiredProduct = state.find(product => product.id === id)
	if (desiredProduct) {
		desiredProduct.name = name
		desiredProduct.desc = desc
		desiredProduct.price = price
		desiredProduct.amount = amount
	}
},

ჩვენ მხოლოდ უნდა გავატანოთ action creator-ი კომპონენტში გამოყენებისთვის, რომელსაც ჩვენთვის შექმნის createSlice. მოდით დავამატოთ ის ექსპორტს ფაილის ბოლოს, არსებულ productAdded-თან ერთად:

export const { productAdded, productUpdated } = productsSlice.actions

გახსენით თქვენი აპლიკაცია სტუდენტებით. გაკვეთილის მასალის შესწავლის შემდეგ, ფაილში studentsSlice.js დაწერეთ კიდევ ერთი reducer productsSlice-ისთვის, რომელიც განაახლებს სტუდენტის მონაცემებს store-ში მათი შეცვლის შემთხვევაში მომხმარებლის მიერ. დაარქვით მას studentUpdated.

როგორ გამოიყურებოდა ამ შემთხვევაში თქვენი action ობიექტი? გამოგვიგზავნეთ მისი კოდი პასუხში.

ფაილის ბოლოს გაატანეთ მიღებული action creator studentUpdated.