Деректерді Redux-та өңдеу пішіні

Енді бізде store-дегі деректерді өзгерту үшін редьюсер бар. Осы сабақта біз өнім деректерін өңдей алатын пішін жасаймыз.

Өнімдер қолданбасын ашып, products бумасында EditProductForm.jsx файлын жасайық. EditProductForm компонентін жасау NewProductForm-ке ұқсас болады, тек біз тоқталатын бірнеше айырмашылықтар бар. Сондықтан NewProductForm.jsx-тің кодын толық көшіріп, жасалған EditProductForm.jsx файлына салыңыз. Енді ретімен бастайық.

Импорттан nanoid-ті алып тастаңыз, мұнда бізге id generate etu қажет емес. productAdded импортын productUpdated-ке ауыстырыңыз, себебі мұнда біз қосу үшін емес, өнімді жаңарту үшін action қолданамыз.

Әрі қарай біздің компонент функциясының атауын NewProductForm-тен EditProductForm-ке өзгертеміз.

EditProductForm функциясында name, desc, price және amount үшін жергілікті стейттерді енгізбес бұрын, тағы бірнеше жол кодын салайық. Біз бұған дейін айтқанымыздай, мұнда бізге id generate etu қажет емес. Енді біздің міндетіміз өзгертілетін өнім деректерінен оны алу. Біз мұны өнімге арналған жеке парақшаны жасаған кезде жасадық. Сонымен, useParams көмегімен id алайық, содан кейін useSelector көмегімен (файлдың басында екі hook те импорттауды ұмытпаңыз) бізге қажет өнімді табайық:

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

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

Осыдан кейін жергілікті стейттерді декларациялау блокын өзгертеміз. Енді бізге бастапқы мән ретінде store-дан алынған өнім деректерін тағайындау керек. Бірінші стейт осылай көрінеді, қалған үшеуін өзгертуді өзіңіз жасаңыз:

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

useDispatch үшін айнымалыны тағайындағаннан кейін, біз useNavigate hook-і үшін тағы бір жол кодын енгіземіз. Біз оны пайдаланушы пішіндегі өзгерістерді сақтаған кезде өнім парақшасына оралу үшін қолданамыз:

const navigate = useNavigate()

Сондай-ақ бұл hook-ті файлдың басында импорттаңыз:

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

Әрі қарай бізде енгізу өрістері үшін өңдеушілер бар. Олардан кейін бізге onSaveProductClick функциясын түзету керек. Енді онда басқан кезде біз алынған id және объект түріндегі өзгертілген деректермен productUpdated экшенін жібереміз. Содан кейін өзгертілген өнім парақшасына өту үшін 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>

Студенттеріңізбен қолданбаны ашыңыз. NewStudentForm.jsx-ке ұқсас EditStudentForm.jsx файлын жасаңыз. Сабақта көрсетілгендей оған өзгерістер енгізіңіз.