Kuongeza Taarifa za Muuzaji kwenye Redux

Tumekuwa tukizungumza juu ya kwamba bidhaa zetu kwa hakika zinaongezwa kwenye programu na wauzaji. Hebu wakati wa kuongeza bidhaa mpya, tuonyeshe taarifa kuhusu muuzaji.

Wazi programu yetu ya bidhaa, na ndani yake faili productsSlice.js. Hebu tupitishe kwenye prepare parameter nyingine moja, tuiite sellerId na tuiset baadaye kwa payload ya action. Sasa kipande chetu cha msimbo kwa prepare kitakuwa kama hiki:

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

Sasa tunahitaji kufanya mabadiliko kadhaa kwenye faili ya fomu ya kuongeza bidhaa NewProductForm.jsx. Kwa kuanza tuongeze sera nyingine ya ndani kwa kitambulisho cha muuzaji:

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

Kisha baada ya tamko la kutofautiana dispatch kwa useDispatch, tuongeze msimbo wa kupata kipande cha wauzaji kutoka kwa hali kwa kutumia ndoano useSelector:

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

Kwa wasindikaji wa uwanja wa kuingiza data tuongeze mwingine mmoja:

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

Turekebisu onSaveProductClick, tukiongezea action productAdded pia sellerId:

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

Fungua programu yako ya wanafunzi. Ongeza uwezo wa kuweka taarifa kuhusu mwalimu aliyeongeza wanafunzi. Kwa kufanya hivyo, kwa kusoma nyenzo za somo, fanya mabadiliko kwa kazi prepare kwenye faili studentsSlice.js.

Fanya mabadiliko yanayofaa kwenye faili NewStudentForm.jsx