Տվյալների խմբագրման ձև Redux-ում

Այժմ մենք ունենք reducer՝ store-ի տվյալները փոխելու համար: Այս դասին մենք կստեղծենք մի ձև, որի միջոցով կկարողանանք խմբագրել ապրանքի տվյալները:

Եկեք բացենք մեր ապրանքների հավելվածը և ստեղծենք products պանակում EditProductForm.jsx ֆայլը: EditProductForm կոմպոնենտի ստեղծումը նման կլինի NewProductForm-ին, բացառությամբ որոշ տարբերությունների, որոնց վրա մենք կկենտրոնանանք: Ուստի ամբողջությամբ պատճենեք NewProductForm.jsx-ի կոդը և տեղադրեք այն ստեղծված ֆայլում EditProductForm.jsx: Այժմ սկսենք հերթականությամբ:

Հեռացրեք nanoid-ի իմպորտը, այստեղ մեզ պետք չէ գեներացնել id: Փոխարինեք productAdded իմպորտը productUpdated-ով, քանի որ այստեղ մենք կօգտագործենք action թարմացման, և ոչ թե ավելացման համար:

Այնուհետև կփոխենք մեր կոմպոնենտի ֆունկցիայի անվանումը NewProductForm-ից դեպի EditProductForm:

Նախքան EditProductForm ֆունկցիայում լոկալ state-եր ստեղծելը name-ի, desc-ի, price-ի և amount-ի համար, եկեք տեղադրենք ևս մի քանի տող կոդ: Ինչպես նախկինում նշեցինք, այստեղ մեզ պետք չէ գեներացնել id: Այժմ մեր խնդիրն է այն ստանալ փոփոխվող ապրանքի տվյալներից: Մենք արդեն դա արել ենք ապրանքի համար առանձին էջ ստեղծելիս: Այսպիսով, ստացեք id՝ օգտագործելով useParams hook-ը, ապա գտեք մեզ անհրաժեշտ ապրանքը՝ օգտագործելով useSelector hook-ը (մի մոռացեք իմպորտել երկու hook-երը ֆայլի սկզբում):

let params = useParams()
const { productId } = params

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

Դրանից հետո կփոխենք լոկալ state-երի հայտարարման բլոկը: Այժմ մեզ պետք է որպես սկզբնական արժեք նշանակել նրանց store-ից ստացված ապրանքի տվյալները: Ահա թե ինչպես կլինի առաջին state-ը, մնացած երեքը փոխակերպեք ինքներդ.

const [name, setName] = useState(product.name)

useDispatch-ի համար փոփոխական նշանակելուց հետո եկեք ավելացնենք ևս մեկ տող կոդ այս անգամ useNavigate hook-ի համար: Մենք այն կօգտագործենք ապրանքի էջ վերադառնալու համար, երբ օգտատերը պահպանի ձևում կատարված փոփոխությունները:

const navigate = useNavigate()

Նաև իմպորտեք այս hook-ը ֆայլի սկզբում.

import { useNavigate, useParams } from 'react-router-dom'

Հաջորդիվ մենք ունենք մշակիչներ մուտքագրման դաշտերի համար: Դրանցից հետո մեզ անհրաժեշտ է ուղղել onSaveProductClick ֆունկցիան: Այժմ դրանում կտտոցի ժամանակ մենք կուղարկենք productUpdated action-ը ստացված id-ով և փոփոխված տվյալներով՝ օբյեկտի տեսքով: Դրանից հետո կավելացնենք մեր navigate-ը՝ փոփոխված ապրանքի էջ անցնելու համար.

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

Մնաց միայն մեր վերադարձվող վերստում գտնել տողը.

<h2>Add a New Product</h2>

Եվ փոխարինել այն.

<h2>Edit Product</h2>

Բացեք ձեր ուսանողների հավելվածը: Ստեղծեք EditStudentForm.jsx ֆայլը NewStudentForm.jsx-ի անալոգիայով: Կատարեք դրանում փոփոխություններ, ինչպես ցույց է տրված դասում: