Reduxda thunks lar bilan tanishuv

Oldingi bobda biz ma'lumot almashinuvi uchun server, ma'lumotlar bazasi va klientni tashkil qildik. Endi bizning 'sinxron' tashkil etilgan Redux ilovamizni o'tgan bobning so'nggi darsida yaratgan asinxron klientimiz bilan o'zaro ishlashi uchun so'rovlarni yuborish va javobda kerakli ma'lumotlarni olish imkonini beradigan so'nggi ko'prikni quramiz.

Oldingi bo'limning birinchi darslaridan esimizda bo'lganidek, Redux asinxron logika bilan ishlash haqida hech narsa bilmaydi va buning uchun biz thunk middleware dan foydalanamiz. Ushbu middleware yuborilgan actions lar bilan ishlashga, thunk imizning kodida store ning dispatch va getState metodlaridan foydalanishga, shuningdek dispatch metodiga oddiy JS ob'ektlari bilan bir qatorda funktsiyalar va promislar kabi ob'ektlar bilan ham ishlashga yordam beradi.

Odatda thunk-funktsiya ikkita argument bilan chaqiriladi dispatch va getState (agar kerak bo'lsa), ularni ushbu funktsiya tarkibida ishlatish mumkin. Uning yordamida oddiy ekshanlarni yuborish mumkin. Shuningdek uni store.dispatch orqali ham yuborish mumkin. Bunday funktsiyaning misoli quyida keltirilgan:

const changeColorThunk = (dispatch, getState) => {
	const colorBefore = getState()
	console.log(`Eski Rang: ${colorBefore.color}`)
	
	dispatch(changeColor())
	
	const colorAfter = getState()
	console.log(`Yangi Rang: ${colorAfter.color}`)
}

store.dispatch(changeColorThunk)

Keling, endi mahsulotlar bilan ishlaydigan ilovamizni ochaylik. Ilovani ishga tushirganimizda serverdan olishimiz kerak bo'lgan birinchi narsa - bu mahsulotlar ro'yxati. Odatda thunks lar slice-fayllarida yozilgani uchun, biz productsSlice.js faylini ochamiz.

Xushxabar shundaki, biz Redux Thunk ni o'rnatish bilan shug'ullanishingiz shart emas, chunki RTK dagi configureStore funktsiyasi buni biz uchun allaqachon qiladi. Shuning uchun shunchaki faylda import ga createAsyncThunk ni qo'shamiz:

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

Shuningdek, import ga klientimizni ham qo'shamiz:

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

Va endi createAsyncThunk yordamida mahsulotlarni olish uchun birinchi thunk imizni yaratamiz, buni initialState ob'ekti e'lon qilinganidan keyin darhol bajaramiz:

export const fetchProducts = createAsyncThunk()

createAsyncThunk ning birinchi parametri yaratilayotgan action turi uchun satrni, ikkinchi parametri esa payload uchun kolbek-funktsiyani qabul qiladi, natijada u ma'lumotlarni yoki xatolik bilan promisni qaytaradi (client.js fayliga qarang). Funktsiya kodida biz client.get ni chaqiramiz va unga serverda belgilagan yo'lni (server.js dagi http.get qabul qiladigan parametrlarga qarang) uzatamiz:

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

Talabalar bilan ishlaydigan ilovangizni oching. Undagi studentsSlice.js faylini oching. Undaga thunk yaratish uchun createAsyncThunk funktsiyasini, shuningdek serverga API so'rovlarini yuborish uchun client ni import qiling.

initialState ob'ekti e'lon qilinganidan keyin darhol createAsyncThunk yordamida talabalar ro'yxatini olish uchun fetchStudents thunk ini yarating, u server.js faylida belgilangan /fakeServer/students manziliga GET-so'rov yuboradi va dars materiallarida ko'rsatilganidek response.data ni qaytaradi. createAsyncThunk uchun birinchi parametr sifatida action turi uchun students/fetchStudents satrini belgilang.