რედიუსერი და action Redux-ში

წინა გაკვეთილზე ჩვენ დავასრულეთ პროდუქტის დამატების ფორმა და გამოვიტანეთ იგი მთავარ გვერდზე. მაგრამ ჯერჯერობით დამატებული მონაცემები არ ინახება, სხვა სიტყვებით რომ ვთქვათ, ახალი პროდუქტი არ ემატება 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, რომელსაც ვიყენებთ. როგორც კი ჩვენ დავწერეთ reducer, იგი ავტომატურად შექმნის ჩვენთვის action creator-ს იმავე სახელით. ჩვენ მხოლოდ დაგვრჩენია მიღებული action creator-ის ექსპორტი შემდგომი გამოყენებისთვის კომპონენტებში. მოდით, გავაკეთოთ ეს ფაილის ბოლოს, რედიუსერის ექსპორტამდე, ასე:

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

გახსენით თქვენი აპლიკაცია სტუდენტებით, შემდეგ კი ფაილი studentsSlice.jsx, დაწერეთ createSlice-ისთვის reducer ველის მნიშვნელობა, როგორც ეს გაკვეთილზე იყო ნაჩვენები.

დაამატეთ ფაილის studentsSlice.jsx ბოლოს მიღებული action creator ფუნქციის ექსპორტი.