Αλλαγή δεδομένων προϊόντος στο Redux store

Μαθαίνουμε να προσθέτουμε προϊόντα, αλλά τι γίνεται αν θέλουμε να αλλάξουμε τις πληροφορίες για ένα προϊόν; Ας δούμε πώς μπορούμε να το κάνουμε σε αυτό και στα επόμενα μαθήματα.

Ας ανοίξουμε την εφαρμογή μας με τα προϊόντα και ας πάμε στο αρχείο productsSlice.js. Ας ξεκινήσουμε από το γεγονός ότι για το slice products πρέπει να γράψουμε ένα ακόμη reducer, που θα ενεργοποιείται κατά την ενημέρωση ενός προϊόντος. Ας το ονομάσουμε productUpdated και ας το προσθέσουμε στο πεδίο reducers μετά τον reducer productAdded. Επίσης ας του περάσουμε αμέσως ως παραμέτρους state και action, πάνω στα οποία, όπως θυμόμαστε, λειτουργεί ο reducer:

reducers: {
	productAdded(state, action) {
		state.push(action.payload)
	},
	productUpdated(state, action) {},
},

Τώρα ας σκεφτούμε, ποια δεδομένα θα χρειαστούμε για την ενημέρωση του προϊόντος. Πρώτα απ' όλα - αυτό είναι το id, από αυτό θα μπορούμε να βρούμε το προϊόν που μας ενδιαφέρει στο store. Τα υπόλοιπα δεδομένα - όνομα, περιγραφή, τιμή και ποσότητα θα είναι διαθέσιμα για αλλαγή. Όλες αυτές οι τιμές θα τις λάβουμε από την ιδιότητα payload του αντικειμένου action, που θα μας έρθει, και, αν το γράφαμε χειροκίνητα, τότε θα έμοιαζε όπως φαίνεται παρακάτω. Σημειώστε ότι η αναμενόμενη τιμή της ιδιότητας payload - είναι ένα όρισμα, γι' αυτό θα περνάμε εδώ ένα αντικείμενο (για αυτό θα μιλήσουμε στη συνέχεια):

{
	type: 'products/productUpdated',
	payload: {id, name, desc, price, amount}
}

Έχοντας διαλευκάνει τα κύρια σημεία, τώρα μπορούμε να γράψουμε μέσα σε άγκιστρα τον κώδικα για το productUpdated. Αρχικά, ας πάρουμε από το αντικείμενο action τα αλλαγμένα δεδομένα:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
},

Τώρα θα βρούμε βάσει του ληφθέντος id το προϊόν, που χρειάζεται να αλλάξει:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
	const desiredProduct = state.find(product => product.id === id)
},

Αν βρέθηκε τέτοιο προϊόν στο store, τότε θα αντικαταστήσουμε τα δεδομένα του με νέες τιμές:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
	const desiredProduct = state.find(product => product.id === id)
	if (desiredProduct) {
		desiredProduct.name = name
		desiredProduct.desc = desc
		desiredProduct.price = price
		desiredProduct.amount = amount
	}
},

Απομένει μόνο να εξάγουμε τον δημιουργό action για χρήση στο component, που ευγενικά θα τον δημιουργήσει για εμάς η createSlice. Ας τον προσθέσουμε στην εξαγωγή στο τέλος του αρχείου, μαζί με το υπάρχον productAdded:

export const { productAdded, productUpdated } = productsSlice.actions

Ανοίξτε την εφαρμογή σας με τους μαθητές. Έχοντας μελετήσει το υλικό του μαθήματος, στο αρχείο studentsSlice.js συμπληρώστε έναν ακόμη reducer για το productsSlice, που θα ενημερώνει τα δεδομένα του μαθητή στο store σε περίπτωση αλλαγής τους από τον χρήστη. Ονομάστε τον studentUpdated.

Και πώς θα έμοιαζε σε αυτή την περίπτωση το αντικείμενό σας action; Στείλτε τον κώδικά του στην απάντηση.

Στο τέλος του αρχείου εξάγετε τον δημιουργό action studentUpdated που προέκυψε.