Redux'тогу Редьюсер жана action

Акыркы сабакта биз продукт кошуу формасын бүтүрүп, аны башкы бетке чыгардык. Бирок азыркы учурда кошулган маалыматтар сакталбайт, башка сөз менен айтканда жаңы продукт store'догу бар продукттарга кошулбайт. Муну оңдолу.

Баштоо үчүн, биздин продукттар колдонмосунда productsSlice.jsx файлын ачып, createSlice үчүн reducer касиетине productAdded функциясын жазабыз, ал өзүнө берилген учурдагы стейт жана экшен негизинде store'го продукт кошуу менен алек болот. Бул жерде бизге толук 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 функциясы тарабынан жасалат. Редьюсерди жазып бүтүргөндөн кийин, ал биз үчүн автоматтык түрдө ошол эле аттагы action creator'ди түзөт. Бизге жөн эле компоненттерде колдонуу үчүн алынган action creator'ди экспорттоо гана калат. Муны файлдын аягында редьюсерди экспорттоодон мурун, мындай кылабыз:

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

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

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