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

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

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

products/productsSlice.jsreducers: {
  productAdded(state, action) {
    state.push(action.payload)
  },
  productUpdated(state, action) {},
},

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

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

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

products/productsSlice.jsproductUpdated(state, action) {
  const { id, name, desc, price, amount } = action.payload
},

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

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

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

products/productsSlice.jsproductUpdated(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:

products/productsSlice.jsexport const { productAdded, productUpdated } = productsSlice.actions