Reduxdagi Reducer va action

Oldingi darsda biz mahsulot qo'shish uchun formani yakunladik va uni asosiy sahifada ko'rsatdik. Lekin hozircha qo'shilgan ma'lumotlar saqlanmayapti, boshqacha qilib aytganda, yangi mahsulot storeda mavjud bo'lganlarga qo'shilmayapti. Buni tuzataylik.

Boshlash uchun, bizning mahsulotlar ilovasida productsSlice.jsx faylini ochamiz va createSlice uchun reducer xususiyatida storega mahsulot qo'shish bilan shug'ullanadigan, unga joriy holat va action uzatiladigan productAdded funksiyasini yozamiz. Shuni ta'kidlash kerakki, bu yerda bizga butun state emas, balki faqat mahsulotlar uchun javob beradigan qismi uzatiladi (products slice faqat shu haqida biladi). Yangi mahsulot ob'ekti forma saqlash tugmasi bosilganda handler tomonidan yaratiladigan action ob'ektining payload xususiyatida bo'ladi. Natijada productAdded reduceri createSlice kodida shunday ko'rinadi:

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

Action haqida nima deyish mumkin? Darslikning boshida biz action - bu ilovada sodir bo'lgan narsani tasvirlaydigan, ob'ekt shaklida ifodalangan voqea ekanligini aytgan edik. Biz shuningdek, action creator funksiyasidan foydalanishimiz mumkinligi haqida ham gapirdik, u bizga shunday ob'ekt yaratib beradi, masalan:

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

Yaxshi xabar shundaki, bizga hech narsa qilish shart emas, buning o'rniga biz foydalanayotgan createSlice funksiyasi buni biz uchun qiladi. Biz reducerni yozganimiz bilan, u avtomatik ravishda biz uchun xuddi shu nomdagi action creatorni yaratadi. Biz faqat olingan action creatorni komponentlarda keyingi foydalanish uchun eksport qilishimiz kerak. Buni fayl oxirida, reducer eksportidan oldin shunday qilamiz:

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

Talabalar bilan bog'liq ilovingizni oching, keyin studentsSlice.jsx faylini oching, createSlice uchun reducer maydonining qiymatini darsda ko'rsatilgandek yozing.

studentsSlice.jsx faylining oxiriga olingan action creator funksiyasini eksport qo'shing.