მონაცემების გაგზავნა thunk-ის საშუალებით Redux-ში

წინა გაკვეთილზე ჩვენ გავეცანით POST-მოთხოვნის დამუშავებას ჩვენს ფეიკ სერვერზე. მოდით ახლა დავწეროთ thunk-ფუნქცია, რომელიც გაგზავნის მოთხოვნას სერვერზე.

გავხსნათ ჩვენი აპლიკაცია პროდუქტებით, ხოლო მასში ფაილი productsSlice.js. ახლა thunk fetchProducts-ის შემდეგ createAsyncThunk-ის საშუალებით შევქმნათ thunk addProduct:

export const addProduct = createAsyncThunk()

პირველ პარამეტრად ჩვენ გადავცემთ createAsyncThunk-ს 'products/addProduct', ხოლო მეორედ ასინქრონულ კოლბექს, რომელიც მიიღებს ობიექტს ახალი პროდუქტის მონაცემებით:

export const addProduct = createAsyncThunk(
	'products/addProduct',
	async (newProduct) => {}
)

ამ კოლბექის კოდში ჩვენ გამოვიძახებთ კლიენტს, გადავცემთ მას პარამეტრებად მარშრუტს და ობიექტს პროდუქტით, ხოლო შემდეგ დავაბრუნებთ პასუხის მონაცემებს:

export const addProduct = createAsyncThunk(
	'products/addProduct',
	async (newProduct) => {
		const response = await client.post('/fakeServer/products', newProduct)
		return response.data
	}
)

ახლა ქვევით კოდში გადავხედოთ ველს reducers productsSlice-ისთვის. ადრე ჩვენ ვამატებდით ახალ პროდუქტს რედიუსერის productAdded საშუალებით, რომელშიც გვქონდა მეთოდები reducer და prepare. ახლა ჩვენ ვგენერირებთ საჭირო მონაცემებს სერვერზე და ვმუშაობთ thunk-თან, ამიტომ აქ მთლიანად ამოვიღებთ რედიუსერს productAdded კოდიდან. ხოლო შემდეგ შევიტანთ მეთოდში extraReducers (მისი კოდის ბოლოს) კიდევ ერთ დამატებით რედიუსერს, რომელიც წარმატებული მოთხოვნის შემთხვევაში დაამატებს სლაისში products ახალ პროდუქტს უშუალოდ payload-დან ექშენის (გვახსოვდეს, რომ ასეთი კოდი შესაძლებელია მხოლოდ createSlice-ის წყალობით):

.addCase(addProduct.fulfilled, (state, action) => {
	state.products.push(action.payload)
})

დიახ, სხვათა შორის, არ დაგავიწყდეთ nanoid-ის ამოღება იმპორტების სტრიქონებიდან, ხოლო productAdded ექშენების ექსპორტიდან ფაილის ბოლოს.

გახსენით თქვენი აპლიკაცია სტუდენტებით. გახსენით მასში ფაილი studentsSlice.js. createAsyncThunk-ის საშუალებით შექმენით კიდევ ერთი thunk addStudent, რომელიც გაგზავნის POST-მოთხოვნას სერვერზე, რათა დაამატოს ახალი სტუდენტი, როგორც ეს ნაჩვენებია გაკვეთილზე.

შემდეგ ქვევით შეიტანეთ ცვლილებები studentsSlice-ისთვის: მთლიანად ამოიღეთ რედიუსერი studentAdded თვისებაში reducers. ხოლო ველში extraReducers დაამატეთ დამატებითი რედიუსერი, რომელიც დაამატებს ახალ სტუდენტს სლაისში students payload-დან ექშენის წარმატებული მოთხოვნის შემთხვევაში, როგორც ნაჩვენებია გაკვეთილზე.