Вовед во thunks во Redux

Во претходното поглавје ја организиравме работата на серверот, базата на податоци и клиентот за размена на податоци. Сега ни е неопходно да го поставиме последниот мост, кој ќе му помогне на нашето 'синхроно' организирано Redux апликација да комуницира со асинхрониот клиент, кој го создадовме на последната лекција од претходното поглавје, за да испраќа барања и да ги добива потребните податоци во одговорот.

Како што се сеќаваме од првите лекции од претходниот дел, Redux не знае ништо за работа со асинхрона логика и за ова ќе користиме thunk middleware. Овој middleware овозможува работа со испратени actions, користење во кодот на нашиот thunk на dispatch и getState методите на store, како и да му помага на методот dispatch да работи не само со обични JS објекти, туку и со ентитети како функции и promises.

Обично thunk-функцијата се повикува со два аргументи dispatch и getState (доколку е потребно), кои може да се користат во телото на оваа функција. Со неа може да се испраќаат обични actions. Исто така неа може да се испрати преку store.dispatch. Пример за таква функција е даден подолу:

const changeColorThunk = (dispatch, getState) => {
	const colorBefore = getState()
	console.log(`Старa боја: ${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, која како резултат ќе врати или податоци, или promise со грешка (погледнете ја датотеката 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.