Αποστολή δεδομένων με χρήση thunk στο Redux

Στο προηγούμενο μάθημα ασχοληθήκαμε με την επεξεργασία POST-request στον ψεύτικο μας διακομιστή. Ας γράψουμε τώρα μια thunk-συνάρτηση που θα στέλνει αίτημα στο διακομιστή.

Ας ανοίξουμε την εφαρμογή μας με τα προϊόντα, και σε αυτή το αρχείο productsSlice.js. Τώρα μετά από το thunk fetchProducts θα χρησιμοποιήσουμε το createAsyncThunk για να δημιουργήσουμε το thunk addProduct:

export const addProduct = createAsyncThunk()

Ως πρώτη παράμετρο θα περάσουμε στο createAsyncThunk το 'products/addProduct', και ως δεύτερη την ασύγχρονη συνάρτηση callback, που θα δέχεται ένα αντικείμενο με τα δεδομένα του νέου προϊόντος:

export const addProduct = createAsyncThunk(
	'products/addProduct',
	async (newProduct) => {}
)

Στον κώδικα αυτού του callback θα καλέσουμε τον client, περνώντας του ως παραμέτρους το μονοπάτι και το αντικείμενο με το προϊόν, και έπειτα θα επιστρέψουμε τα δεδομένα της απάντησης:

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

Τώρα πιο κάτω στον κώδικα ας δούμε το πεδίο reducers για το productsSlice. Πριν, προσθέταμε νέο προϊόν με τον reducer productAdded, στον οποίο είχαμε μεθόδους reducer και prepare. Τώρα δημιουργούμε τα απαραίτητα δεδομένα στο διακομιστή και δουλεύουμε με thunk, οπότε ας αφαιρέσουμε εδώ πλήρως τον reducer productAdded από τον κώδικα. Και έπειτα ας προσθέσουμε στη μέθοδο extraReducers (στο τέλος του κώδικά της) ακόμα έναν επιπλέον reducer, ο οποίος σε περίπτωση επιτυχημένου αιτήματος θα προσθέτει στο slice products το νέο προϊόν απευθείας από το payload της action (θυμόμαστε, ότι τέτοιος κώδικας είναι δυνατός χάρη στον ασύλληπτο createSlice):

.addCase(addProduct.fulfilled, (state, action) => {
	state.products.push(action.payload)
})

Ναι, παρεμπιπτόντως, μην ξεχάσετε να αφαιρέσετε το nanoid από τις γραμμές των εισαγωγών, και το productAdded από την εξαγωγή των actions στο τέλος του αρχείου.

Ανοίξτε την εφαρμογή σας με τους μαθητές. Ανοίξτε σε αυτή το αρχείο studentsSlice.js. Με τη βοήθεια του createAsyncThunk δημιουργήστε ακόμα ένα thunk addStudent, που θα στέλνει POST-αίτημα στο διακομιστή, για να προσθέσει νέο μαθητή, όπως φαίνεται στο μάθημα.

Έπειτα πιο κάτω κάντε αλλαγές για το studentsSlice: αφαιρέστε πλήρως τον reducer studentAdded στην ιδιότητα reducers. Και στο πεδίο extraReducers προσθέστε έναν επιπλέον reducer, που θα προσθέτει νέο μαθητή στο slice students από το payload της action σε περίπτωση επιτυχημένου αιτήματος, όπως φαίνεται στο μάθημα.