Λήψη δεδομένων πωλητών στο Redux

Ας ξεκινήσουμε την εφαρμογή μας με τα προϊόντα. Βλέπουμε ότι στις κάρτες με τα προϊόντα δεν εμφανίζονται οι πωλητές. Ας λάβουμε τα δεδομένα τους από τον διακομιστή και ας τα εμφανίσουμε. Για αυτό θα πρέπει να ακολουθήσουμε μια ήδη γνωστή ακολουθία ενεργειών.

Αρχικά, ας ανοίξουμε το αρχείο server.js. Ας βρούμε τον πίνακα handlers και ας προσθέσουμε σε αυτόν άλλη μια επεξεργασία GET αιτήματος (μετά την επεξεργασία GET για τα προϊόντα). Όπως βλέπετε, είναι σχεδόν πανομοιότυπη:

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

Έχουμε επεξεργαστεί το αίτημα στο διακομιστή. Στο επόμενο βήμα, στο αρχείο sellersSlice.js πρέπει να γράψουμε ένα thunk για τη λήψη δεδομένων από τον διακομιστή. Για αυτό, εισάγουμε σε αυτό το client και το createAsyncThunk:

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

Τώρα θα λαμβάνουμε τους πωλητές από τον διακομιστή, οπότε θα τους αφαιρέσουμε από το initialState, αφήνοντας απλώς κενές αγκύλες:

const initialState = []

Και στη συνέχεια πριν από τη συνάρτηση sellersSlice θα δημιουργήσουμε το thunk μας fetchSellers. Στον client θα περάσουμε τη διαδρομή που ορίσαμε στον διακομιστή:

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

Απομένει μόνο να δημιουργήσουμε έναν επιπλέον reducer για το sellersSlice. Θα περιοριστούμε εδώ στην επεξεργασία της επιτυχημένης αίτησης. Όλες οι ενέργειες (actions) που παράγονται από το fetchSellers, θα είναι πανομοιότυπες με τις ενέργειες του fetchProducts:

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

Θα υπενθυμίσω ότι την τελευταία φορά, κατά τη λήψη προϊόντων, αλλάζαμε την τρέχουσα τιμή της κατάστασης (state). Εδώ χρησιμοποιήσαμε έναν ελαφρώς διαφορετικό τρόπο και απλώς επιστρέψαμε μια νέα τιμή, αφού και στο createSlice μπορεί να γίνει. Με αυτόν τον τρόπο, πετύχαμε δύο στόχους. Πρώτον, λάβαμε τα δεδομένα, και δεύτερον, τώρα έχουμε την εγγύηση ότι στη λίστα των πωλητών δεν θα εμφανιστεί κάτι άλλο, αφού πλήρως ξαναγράψαμε το slice με την τιμή action.payload.

Ανοίξτε την εφαρμογή σας με τους φοιτητές. Ανοίξτε σε αυτή το αρχείο server.js, προσθέστε στον πίνακα handlers άλλο έναν χειριστή για αίτημα GET των καθηγητών.

Και τώρα ανοίξτε το αρχείο teachersSlice.js. Κάντε το initialState κενό πίνακα, όπως φαίνεται στο μάθημα. Πριν από τη συνάρτηση studentsSlice γράψτε ένα thunk fetchTeachers.

Στη συνάρτηση createSlice συμπληρώστε έναν επιπλέον reducer, περιοριστείτε στην επεξεργασία της επιτυχημένης αίτησης.