Προετοιμασία Δεδομένων για το αντικείμενο action στο Redux

Πρόσφατα μιλήσαμε για το γεγονός ότι η συνάρτηση createSlice αναμένει ένα όρισμα κατά τη δημιουργία του action.payload. Από τη μια πλευρά, αυτό απλοποιεί τη χρήση της, από την άλλη πλευρά μπορεί να απαιτήσει πρόσθετες κινήσεις για την προετοιμασία του περιεχομένου του αντικειμένου action.

Ας ανοίξουμε την εφαρμογή μας με προϊόντα, και σε αυτήν το αρχείο NewProductForm.jsx. Παρατηρήστε την ακόλουθη γραμμή κώδικα:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

Εδώ συναρμολογούμε το αντικείμενο payload απευθείας στο React component και το μεταβιβάζουμε στο action productAdded. Τι γίνεται αν χρειαστεί να στείλουμε ένα τέτοιο action από πολλά components ή η λογική για τη συναρμολόγηση αποδειχθεί περίπλοκη; Κατ' αρχήν, το component μας δεν πρέπει να ενδιαφέρεται για το πώς μοιάζει το αντικείμενο στο payload για αυτό το action. Επιπλέον, δεν μας ικανοποιεί η συνεχής διπλασιασμός του κώδικα.

Αυτά τα προβλήματα μπορεί πάλι να μας βοηθήσει να λύσει το διάσημο createSlice, αφού κατά τη σύνταξη του reducer μας επιτρέπει τη χρήση μιας callback-συνάρτησης prepare, στην οποία μπορούμε να γράψουμε διάφορα λογικά σκέψη, να δημιουργήσουμε τυχαίους αριθμούς και άλλα. Σε μια τέτοια περίπτωση, η τιμή για το πεδίο του reducer μπορεί να αναπαρασταθεί ως το ακόλουθο αντικείμενο:

{reducer, prepare}

Ας ανοίξουμε το αρχείο μας productsSlice.js και ας αλλάξουμε τον κώδικα για τον reducer productAdded. Τώρα αυτό το κομμάτι κώδικα:

productAdded(state, action) {
	state.push(action.payload)
},

Θα το αλλάξουμε στο ακόλουθο, στο οποίο η συνάρτηση reducer θα ασχολείται με την ενημέρωση της state στο store, και η prepare - θα επιστρέφει το αντικείμενο payload με το παραγόμενο id και άλλα δεδομένα μας:

productAdded: {
	reducer(state, action) {
		state.push(action.payload)
	},
	prepare(name, desc, price, amount) {
		return {
			payload: {
				id: nanoid(),
				name,
				desc,
				price,
				amount,
			},
		}
	},
},

Εφόσον τώρα θα παράγουμε το id εδώ, και όχι στο component, ας προσθέσουμε το nanoid στην εισαγωγή:

import { createSlice, nanoid } from '@reduxjs/toolkit'

Τέλος, ας κάνουμε αλλαγές στο NewProductForm.jsx. Αντί για τη γραμμή:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

Θα έχουμε αυτή, στην οποία απλά μέσω κόμματος μεταβιβάζουμε τα απαραίτητα δεδομένα μας (μην ξεχάσετε σε αυτό το αρχείο να αφαιρέσετε το nanoid από την εισαγωγή):

dispatch(productAdded(name, desc, price, amount))

Ας εκκινήσουμε την εφαρμογή, στη συνέχεια ας δημιουργήσουμε ένα νέο προϊόν και ας βεβαιωθούμε ότι δεν σπάσαμε τίποτα.

Ανοίξτε την εφαρμογή σας με τους μαθητές. Στο αρχείο StudentsSlice.js ξαναγράψτε τον reducer σας studentAdded με τέτοιο τρόπο, ώστε να είναι σε μορφή αντικειμένου {reducer, prepare}, όπως φαίνεται στο μάθημα.

Κάντε τις αντίστοιχες αλλαγές στο αρχείο NewStudentForm.jsx, όπως φαίνεται στο μάθημα. Εκκινήστε την εφαρμογή και βεβαιωθείτε ότι όλα λειτουργούν όπως και πριν.