Redux-тағы редьюсер және action

Алдыңғы сабақта біз өнімді қосу үшін форманы аяқтадық және оны басты бетке шығардық. Бірақ қосылған деректер әлі сақталмайды, басқаша айтқанда жаңа өнім store-дағы барларға қосылмайды. Мұны түзейік.

Бастау үшін біздің өнімдер қолдабарымызда productsSlice.jsx файлын ашамыз және createSlice үшін reducer қасиетінде store-ға өнімді қосуға жауапты болатын productAdded функциясын жазамыз, ол берілген ағымдағы стейт пен экшнге негізделеді. Айта кету керек, бұл жерде бізге бүкіл 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

Студенттеріңізбен қолдабарыңызды ашыңыз, содан кейін studentsSlice.jsx файлын ашып, createSlice үшін reducer өрісінің мәнін сабақта көрсетілгендей толтырыңыз.

studentsSlice.jsx файлының соңына алынған action creator функциясын экспорттаңыз.