Увод у 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(`Old Color: ${colorBefore.color}`)
	
	dispatch(changeColor())
	
	const colorAfter = getState()
	console.log(`New Color: ${colorAfter.color}`)
}

store.dispatch(changeColorThunk)

Хајде сада да отворимо нашу апликацију са продуктима. Прво што треба да добијемо од сервера при покретању апликације - то је листа продукта. Како се обично thunks-ови пишу у слајс-фајловима, отворићемо фајл 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-а, а други - колбек-функцију за 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-а.