Редюсер ва action дар Redux

Дар дарси гузашта мо шакли илова кардани маҳсулотро анҷом додем ва онро дар саҳифаи асосӣ чоп кардем. Вале то ҳол маълумоти иловашуда захира намешавад, бо дигар калимаҳо маҳсулоти нав ба маҷмӯи маҳсулотҳои мавҷуда дар store илова намешавад. Биёед инро дуруст кунем.

Барои оғоз дар барномаи мо бо маҳсулотҳо мо файли productsSlice.jsx-ро кушода ва дар хосияти reducer барои createSlice функсияи productAdded-ро менависем, ки ба илова кардани маҳсулот ба store дар асоси ҳолати ҷорӣ ва амали ба он додашуда машғул мешавад. Дар ин ҷо бояд қайд кард, ки ба мо тамоми state дода намешавад, балеки фақат он қисмате, ки барои маҳсулотҳо масъул аст (slice products танҳо онро медонад). Объект бо маҳсулоти нав дар хосияти payload-и объекти action хоҳад буд, ки тавассути коркардкунанда ҳангоми пахш кардани тугмаи захиракунӣ дар шакл сохта мешавад. Дар натиҷа редюсер productAdded дар рамзи createSlice чунин хоҳад буд:

const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {
		productAdded(state, action) {
			state.push(action.payload)
		},
	},
})

Ва аммо action? Дар ибтидои китоби дарсӣ мо зикр кардем, ки action - ин як воқеа аст, ки дар шакли объект тасвир шудааст, ки он чиро, ки дар барнома рӯй додааст, тавсиф мекунад. Мо инчунин гуфтем, ки метавон аз функсияи action creator истифода кард, ки барои мо чунин объекте месозад, масалан ба ин шакл:

const addProduct = newProduct => {
	return {
		type: 'products/productAdded',
		payload: newProduct
	}
}

Хабари хуб ин аст, ки мо ҳеҷ коре набояд кунем, ва ин барои мо функсияи createSlice анҷом медиҳад, ки мо истифода мебарем. Вақте ки мо reducer-ро навиштем, он ба таври худкор action creator-ро бо ҳамон ном барои мо месозад. Ба мо танҳо боқӣ монд, ки action creator-ро барои истифода дар компонентҳои оянда содир кунем. Биёед инро дар охири файл пеш аз содир кардани редюсер анҷом диҳем, ба ин шакл:

export const { productAdded } = productsSlice.actions
export default productsSlice.reducer

Барномаи худро бо донишҷӯён кушоед, сипас файли studentsSlice.jsx-ро кушоед, қимати майдони reducer-ро барои createSlice илова кунед, тавре ки дар дарс нишон дода шуд.

Дар охири файли studentsSlice.jsx содироти функсияи сохташудаи action creator-ро илова кунед.