Сатушы туралы ақпаратты Redux-ке қосу

Біз сіздермен біздің өнімдеріміздің іс жүзінде сатушылар арқылы қосылатыны туралы айттық. Келесі жаңа өнімді қосқан кезде сатушы туралы ақпаратты шығарайық.

Өнімдеріміз бар қолданбаны ашайық, ал ондағы productsSlice.js файлын ашайық. Келесі prepare-ге тағы бір параметр берейік, оны sellerId деп атайық және келесіде экшеннің payload үшін орнатайық. Енді біздің prepare үшін код фрагменті келесідей болады:

prepare(name, desc, price, amount, sellerId) {
	return {
		payload: {
			id: nanoid(),
			name,
			desc,
			price,
			amount,
			seller: sellerId,
		},
	}
},

Енді бізге өнімді қосу формасы бар файлда NewProductForm.jsx бірқатар өзгерістер енгізу керек. Алдымен сатушының id үшін тағы бір локальды стейт қосамыз:

const [sellerId, setSellerId] = useState('')

Содан кейін dispatch айнымалысын useDispatch үшін жариялағаннан кейін, useSelector хукін қолданып, стейттен сатушылар слайсін алу кодын қосамыз:

const sellers = useSelector((state) => state.sellers)

Енгізу өрістерінің өңдегіштеріне тағы бірін қосамыз:

const onSellerChanged = (e) => setSellerId(e.target.value)

onSaveProductClick түзетейік, оған productAdded экшені үшін sellerId қосамыз:

dispatch(productAdded(name, desc, price, amount, sellerId))

Студенттеріңіз бар қолданбаны ашыңыз. Студенттерді қосқан оқытушы туралы ақпаратты енгізу мүмкіндігін қосыңыз. Ол үшін сабақ материалын зерттеп, studentsSlice.js файлындағы prepare функциясына өзгерістер енгізіңіз.

Сәйкес өзгерістерді NewStudentForm.jsx файлына енгізіңіз.