Redux store-daky önüm maglumatlaryny üýtgetmek

Biz önümleri goşmaklygy öwrendik, ýöne öndürilen hakynda maglumatlary üýtgetmek islesek näme? Bu we indiki sapaklarda ony nädip etmelidigine garap göreliň.

Önümler bilen programmaňyzy açyň we productsSlice.js faýlyna giriň. Başlamak üçin, bizim products süljesimiz üçin ýene bir reducer ýazmaly, ol öndürilen üýtgedilende işlediler. Ona productUpdated diýip at beriň we meýdançada reducers reducer productAdded soňra goşuň. Şeýle hem derrew parametrler üsti bilen ötkeriň state we action, şolaryň esasynda, biz ýadyňyzda, reducer işleýär:

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

Indi göz öňüne getireliň, haýsy maglumatlar bizim üçin öndürileni täzelemek üçin zerurdyr. Ilki bilen hemme zat - bu id, onuň üsti bilen biz taparys biziň gyzyklandyrýan önümi store. Galan maglumatlar - at, düşündiriş, baha we mukdary biz üçin üýtgetmek üçin bolar. Şol bahalaryň hemmesi biz alarys aýrylyşyndan payload hereket objekti, şol bize geljek, we, eger ýazýan bolsak ony el bilen, onda ol görkezilişi ýaly görüner, aşakda. Üns beriň, gözlän baha aýrylyşy payload - bir argumendir, şonuň üçin biz bolar bu ýerde obykt ötkeriň (bu barada biz gürrüň ederis indiki):

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

Esasy nokatlary anyklap, indi biz ýazyp bileris egmeç burç içinde kod üçin productUpdated. Ilki bilen alarys obyktden action üýtgedilen maglumatlar:

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

Indi biz alnan id üsti bilen önümi taparys, haýsy üýtgedilmeli:

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

Eger şeýle önüm store-da tapylsa, onda biz onuň maglumatlaryny täze bahalar bilen çalşyrarys:

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
	}
},

Bizim ýeke galýan zadymyz hereket döredijini eksport etmek komponentde ulanmak üçin, haýyşly ýagdaýda döredjek bizim üçin createSlice. Geliň ony goşalyň eksportyň ahyryndaky faýla, bar bolan bilen bir hatarda productAdded:

export const { productAdded, productUpdated } = productsSlice.actions

Talyplyňyz bilen programmaňyzy açyň. Sapak materialyny öwrenip, faýlda studentsSlice.js ýene bir reducer goşuň üçin productsSlice, haýsy talyp maglumatlaryny täzeler store olaryň üýtgedilmegi ýagdaýynda ulanjy tarapyndan. Ona studentUpdated diýip at beriň.

Bu ýagdaýda siziň hereket objektiňiz näme görünüşli bolar? Onuň koduny jogapda iberiň.

Faýlyň ahyrynda alnan hereket döredijisini eksport ediň studentUpdated.