Preuzimanje podataka o prodavcima u Redux-u

Pokrenimo našu aplikaciju sa proizvodima. Vidimo da se u karticama sa proizvodima ne prikazuju prodavci. Preuzmimo ih sa servera i prikažimo te podatke. Za ovo ćemo morati da sprovedemo već poznatu sekvencu radnji.

Za početak otvorimo fajl server.js. Pronađimo niz handlers i dodajmo u njega još jednu obradu GET-zahteva (posle obrade GET za proizvode). Kao što vidite ona je praktično identična:

http.get('/fakeServer/sellers', async () => {
	await delay(ARTIFICIAL_DELAY_MS)
	return HttpResponse.json(db.seller.getAll())
}),

Zahtev na serveru smo obradili. Sledećim korakom u fajlu sellersSlice.js treba da napišemo thunk za preuzimanje podataka sa servera. Za ovo uveziemo u njega client i createAsyncThunk:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import { client } from '../../api/client'

Sada ćemo preuzimati prodavce sa servera, pa ćemo ih ukloniti iz initialState, ostavivši samo prazne zagrade:

const initialState = []

A zatim pre funkcije sellersSlice kreirajmo naš thunk fetchSellers. Klijentu prosledimo putanju, koju smo naveli na serveru:

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

Ostalo nam je samo da za sellersSlice kreiramo dodatni reduktor. Ograničimo se ovde obradom uspešnog zahteva. Sve akcije, koje generiše fetchSellers, biće identične akcijama fetchProducts:

const sellersSlice = createSlice({
	name: 'sellers',
	initialState,
	reducers: {},
	extraReducers(builder) {
		builder.addCase(fetchSellers.fulfilled, (state, action) => {
			return action.payload
		})
	},
})

Podsetiću, da smo prošli put pri preuzimanju proizvoda menjali trenutnu vrednost stanja. Ovde smo koristili nešto drugačiji pristup i jednostavno vratili novu vrednost, jer je i u createSlice to moguće. Time smo postigli dva cilja. Prvo, dobili smo podatke, a drugo, sada imamo garanciju da se u listi prodavaca ne pojavi nešto drugo, jer smo potpuno prepisali slice vrednošću action.payload.

Otvorite vašu aplikaciju sa studentima. Otvorite u njoj fajl server.js, dodajte u niz handlers još jedan obrađivač za GET-zahtev predavača.

A sada otvorite fajl teachersSlice.js. Postavite initialState kao prazan niz, kao što je pokazano na lekciji. Pre funkcije studentsSlice napišite thunk fetchTeachers.

U funkciji createSlice dopišite dodatni reduktor, ograničite se obradom uspešnog zahteva.