Kubadilisha Data ya Bidhaa katika Redux Store

Tumejifunza kuongeza bidhaa, lakini vipi kama tutataka kubadilisha taarifa kuhusu bidhaa? Hebu tuchunguze jinsi ya kufanya hivyo katika somo hili na masomo yajayo.

Washa programu yetu ya bidhaa na uingie kwenye faili productsSlice.js. Tuanzie kwa kile tunachohitaji kwa kipande products kuandika reducer nyingine, ambayo itaanza wakati wa kusasisha bidhaa. Tuite productUpdated na tuiongeze kwenye uga reducers baada ya reducer productAdded. Pia tupitie mara moja vigezo state na action, kwa misingi ambayo, kama tunavyokumbuka, reducer inafanya kazi:

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

Sasa hebu tufikirie, ni data gani tutahitaji kwa ajili ya kusasisha bidhaa. Kabla ya yote - hii ni id, kwa hiyo tutaweza kupata bidhaa tunayopenda kwenye store. Data zingine - jina, maelezo, bei na kiasi zitakuwa kwetu kwa mabadiliko. Thamani hizi zote tutazipata kutoka kwa sifa payload ya kitu action, ambayo itatufikia, na, kama tungelikuwa tunaandika kwa mikono, basi ingeonekana kama inavyoonyeshwa hapa chini. Kumbuka kuwa thamani inayotarajiwa ya sifa payload - hoja moja, kwa hivyo tutakuwa tukipita hapa kitu (kuhusu hili tutazungumza zaidi baadaye):

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

Baada ya kufafanua mambo makuu, sasa tunaweza kuandika kwenye mabano ya curly msimbo wa productUpdated. Kwanza tupate kutoka kwa kitu action data iliyobadilishwa:

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

Sasa tutapata kwa id iliyopatikana bidhaa, ambayo inahitaji kubadilishwa:

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

Ikiwa bidhaa kama hiyo ilipatikana kwenye store, basi tutabadilisha data yake kwa maadili mapya:

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

Inatubaki tu kuhamasisha mtengenezaji wa action kwa matumizi katika sehemu, ambayo kwa ukarimu createSlice itatuundia. Wacha tuiongeze kwenye usafirishaji mwishoni mwa faili, pamoja na productAdded uliopo:

export const { productAdded, productUpdated } = productsSlice.actions

Fungua programu yako ya wanafunzi. Baada ya kusoma nyenzo ya somo, kwenye faili studentsSlice.js andika reducer nyingine kwa productsSlice, ambayo itasasisha data ya mwanafunzi kwenye store ikiwa imebadilishwa na mtumiaji. Uiite studentUpdated.

Na ingekuwa imeonekanaje katika kesi hii kitu chako cha action? Tuma msimbo wake kwenye jibu.

Mwishoni mwa faili safirisha mtengenezaji wa action uliopatikana studentUpdated.