Məlumatların thunk vasitəsilə Redux-da göndərilməsi

Keçən dərsdə bizim saxta serverimizdə POST sorğusunun emalı ilə tanış olduq. Gəlin indi serverə sorğu göndərəcək thunk funksiyasını yazaq.

Məhsullarla olan proqramımızı açaq, və onun içindəki productsSlice.js faylına baxaq. İndi fetchProducts thunk-ından sonra biz createAsyncThunk köməyi ilə addProduct thunk-ını yaradacayıq:

export const addProduct = createAsyncThunk()

Birinci parametr kimi biz createAsyncThunk-a 'products/addProduct' ötürəcəyik, ikinci parametr kimi isə yeni məhsulun məlumatları olan obyekti qəbul edəcək asinxron callback funksiyasını:

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

Bu callback-in kodunda biz klienti çağıracayıq, ona yol və məhsul obyektini parametr kimi ötürəcəyik, sonra isə cavabın məlumatlarını qaytaracayıq:

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

İndi aşağıda productsSlice üçün olan reducers sahəsinə baxaq. Əvvəllər biz productAdded reduceri ilə yeni məhsul əlavə edirdik, onun içində reducer və prepare metodları var idi. İndi biz lazımi məlumatları serverdə generasiya edirik və thunk ilə işləyirik, ona görə də buradan productAdded reducerini tamamilə siləcəyik. Sonra isə extraReducers metoduna (onun kodunun sonuna) əlavə bir reducer əlavə edəcəyik, hansı ki, uğurlu sorğu halında products slaysına action-un payload-undan birbaşa yeni məhsul əlavə edəcək (xatırlayırıq ki, belə kod yalnız createSlice sayəsində mümkündür):

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

Hə, yeri gəlmişkən, nanoid-i import sətirlərindən silmiş olduğunuzdan əmin olun, və faylın sonunda eksport olunan action-lardan productAdded-i silin.

Tələbələrlə olan proqramınızı açın. Ondaki studentsSlice.js faylına baxın. createAsyncThunk köməyi ilə dərsdə göstərildiyi kimi yeni tələbə əlavə etmək üçün serverə POST sorğusu gödərəcək addStudent thunk-ını yaradın.

Sonra aşağıda studentsSlice üçün dəyişikliklər edin: reducers xassəsindəki studentAdded reducerini tamamilə silin. extraReducers sahəsinə isə dərsdə göstərildiyi kimi, uğurlu sorğu halında, students slaysına action-un payload-undan yeni tələbə əlavə edəcək əlavə reducer əlavə edin.