Reducer και action στο Redux

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

Για αρχή, στην εφαρμογή μας με τα προϊόντα θα ανοίξουμε το αρχείο productsSlice.jsx και θα γράψουμε στην ιδιότητα reducer για την createSlice τη συνάρτηση productAdded, η οποία θα ασχολείται με την προσθήκη του προϊόντος στο store με βάση τα τρέχοντα state και action που της μεταβιβάζονται. Πρέπει να σημειωθεί ότι εδώ μας μεταβιβάζεται όχι ολόκληρο το state, αλλά μόνο εκείνο το μέρος του που αντιστοιχεί στα προϊόντα (το slice products γνωρίζει μόνο γι' αυτό). Το αντικείμενο με το νέο προϊόν θα βρίσκεται στην ιδιότητα payload του αντικειμένου action, το οποίο θα δημιουργείται από τον χειριστή κατά το πάτημα του κουμπιού αποθήκευσης στη φόρμα. Ως αποτέλεσμα, ο reducer productAdded θα φαίνεται στον κώδικα της createSlice έτσι:

products/productsSlice.jsconst productsSlice = createSlice({
  name: 'products',
  initialState,
  reducers: {
    productAdded(state, action) {
      state.push(action.payload)
    },
  },
})

Και τι γίνεται με το action; Στην αρχή του σεφαρμογή αναφέραμε ότι το action είναι ένα συμβάν, που παρουσιάζεται ως αντικείμενο, που περιγράφει τι συνέβη στην εφαρμογή. Μιλήσαμε επίσης για το ότι μπορούμε να χρησιμοποιήσουμε τη συνάρτηση action creator, η οποία θα μας δημιουργεί ένα τέτοιο αντικείμενο, για παράδειγμα έτσι:

jsxconst addProduct = newProduct => {
  return {
    type: 'products/productAdded',
    payload: newProduct
  }
}

Τα καλά νέα είναι ότι δεν χρειάζεται να κάνουμε τίποτα, αυτό θα το κάνει για μας η συνάρτηση createSlice, που χρησιμοποιούμε. Μόλις γράψουμε τον reducer, αυτήματα θα δημιουργήσει για μας ένα action creator με το ίδιο όνομα. Εμείς μένει μόνο να εξάγουμε το action creator που προέκυψε για περαιτέρω χρήση σε components. Ας το κάνουμε αυτό στο τέλος του αρχείου πριν την εξαγωγή του reducer, έτσι:

products/productsSlice.jsexport const { productAdded } = productsSlice.actions
export default productsSlice.reducer