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

Ўтган дарсда биз махсул кушиш учун шаклини якунладик ва уни бош саҳифада кўрсатдик. Лекин ҳозиргача кушилган маълумотлар сақланмайди, бошқача айтганда янги маҳсул мавжуд store-дагиларга кушилмайди. Келинг, буни тузатайлик.

Бошлаш учун бизнинг маҳсулотлар иловамизда productsSlice.jsx файлини ochамиз ва createSlice учун reducer хусусиятида productAdded функциясини ёзамиз, унинг вазифаси унга ўтказилган жорий стейт ва экшн асосида store-га маҳсул кушиш бўлади. Шуни айтиш керакки, бу ерда бизга butun state эмас, балки маҳсулотлар учун жавоб берадиган унинг факатгина бир кисми (products слайси факат у ҳақида билади) ўтказилади. Янги маҳсулот билан объект action объектининг payload хусусиятида бўлади, у сақлаш тугмаси босиладида шакл ишловчиси томонидан ишлаб чиқарилади. Натижада 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

Сизнинг талабалар иловангизни ochинг, сўнгра studentsSlice.jsx файлини ochиб, createSlice учун reducer майдонининг қийматини дарсда кўрсатилганидек язаверинг.

studentsSlice.jsx файлининг охирига олинган action creator функциясини экспорт қушинг.