Thunks-ების შესავალი Redux-ში

წინა თავში ჩვენ ორგანიზება გავუკეთეთ სერვერს, მონაცემთა ბაზას და კლიენტს მონაცემთა გაცვლისთვის. ახლა კი საჭიროა დავამთავროთ ბოლო კავშირი, რომელიც დაგვეხმარება ჩვენს 'სინქრონულად' ორგანიზებულ Redux აპლიკაციას ურთიერთქმედებაში ასინქრონულ კლიენტთან, რომელიც ჩვენ წინა თავის ბოლო გაკვეთილზე შევქმენით, რათა გავგზავნოთ მოთხოვნები და მივიღოთ საჭირო მონაცემები პასუხში.

როგორც ჩვენ გვახსოვს წინა განყოფილების პირველი გაკვეთილებიდან, Redux-ს არაფერი იცის ასინქრონული ლოგიკით მუშაობის შესახებ და ამისთვის ჩვენ გამოვიყენებთ thunk middleware-ს. ეს middleware საშუალებას აძლევს მუშაობას გაგზავნილ actions-ებთან, გამოიყენოს ჩვენი thunk-ის კოდში dispatch და getState store-ის მეთოდები, და ასევე დაეხმაროს dispatch მეთოდს მუშაობაში არა მხოლოდ ჩვეულებრივი JS ობიექტებით, არამედ ისეთ ენტიტებთან, როგორიცაა ფუნქციები და პრომისები.

ჩვეულებრივ, thunk-ფუნქცია იწოდება ორი არგუმენტით dispatch და getState (საჭიროების შემთხვევაში), რომელთა გამოყენებაც შესაძლებელია ამ ფუნქციის ტანში. მისი საშუალებით შესაძლებელია ჩვეულებრივი ექშენების გაგზავნა. ასევე მისი გაგზავნა შესაძლებელია store.dispatch-ის მეშვეობით. ასეთი ფუნქციის მაგალითი მოცემულია ქვემოთ:

const changeColorThunk = (dispatch, getState) => {
	const colorBefore = getState()
	console.log(`ძველი ფერი: ${colorBefore.color}`)
	
	dispatch(changeColor())
	
	const colorAfter = getState()
	console.log(`ახალი ფერი: ${colorAfter.color}`)
}

store.dispatch(changeColorThunk)

ახლა კი გავხსნათ ჩვენი პროდუქტების აპლიკაცია. პირველი, რაც ჩვენ უნდა მივიღოთ სერვერიდან აპლიკაციის გაშვებისას - ეს არის პროდუქტების სია. ვინაიდან ჩვეულებრივ thunks-ები იწერება slice-ფაილებში, ჩვენ გავხსნით ფაილს productsSlice.js.

სასიხარულო ამბავი ის არის, რომ ჩვენ არ გვჭირდება Redux Thunk-ის ინსტალაციაში ჩაძირვა, რადგან ფუნქცია configureStore RTK-დან უკვე გააკეთებს ამას ჩვენთვის. ამიტომ უბრალოდ დავამატოთ createAsyncThunk იმპორტში ფაილში:

import { createSlice, nanoid, createAsyncThunk } from '@reduxjs/toolkit'

ასევე დავამატოთ იმპორტში ჩვენი კლიენტი:

import { client } from '../../api/client'

ახლა კი createAsyncThunk-ის საშუალებით შევქმნათ ჩვენი პირველი thunk პროდუქტების მისაღებად, გავაკეთოთ ეეს დაუყოვნებლივ initialState ობიექტის განსაზღვრის შემდეგ:

export const fetchProducts = createAsyncThunk()

createAsyncThunk-ის პირველი პარამეტრი მიიღებს სტრიქონს გენერირებული action-ის ტიპისთვის, ხოლო მეორე - callback-ფუნქციას payload-ისთვის, რომელიც შედეგად დააბრუნებს ან მონაცემებს, ან პრომისს შეცდომით (იხილეთ ფაილი client.js). ფუნქციის კოდში ჩვენ ვიძახებთ client.get-ს და გადავცემთ მას გზას, რომელიც ჩვენ მივუთითეთ სერვერზე (შეამოწმეთ მიღებული პარამეტრები http.get server.js-ში):

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

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

დაუყოვნებლივ initialState ობიექტის განსაზღვრის შემდეგ createAsyncThunk-ის საშუალებით შექმენით thunk fetchStudents სტუდენტების სიის მისაღებად, რომელიც გაგზავნის GET-მოთხოვნას მისამართზე /fakeServer/students, მითითებული თქვენს ფაილში server.js, და დააბრუნებს response.data-ს, როგორც ნაჩვენებია გაკვეთილის მასალაში. როგორც პირველი პარამეტრი createAsyncThunk-ისთვის მიუთითეთ სტრიქონი students/fetchStudents action-ის ტიპისთვის.