Αλλαγή της δομής της κατάστασης στο Redux

Το πρώτο στάδιο που θα υλοποιήσουμε για την αλληλεπίδραση της εφαρμογής μας Redux με κάποιον εξωτερικό διακομιστή - είναι η λήψη δεδομένων που είναι αποθηκευμένα σε αυτόν κατά την εκκίνηση της εφαρμογής. Αλλά πριν από αυτό, ας κάνουμε κάποιες αλλαγές στην εφαρμογή μας.

Ας ανοίξουμε την εφαρμογή μας με τα προϊόντα, και σε αυτήν το αρχείο productsSlice.js. Παρατηρήστε τον ορισμό του initialState. Αρχικά, το slice μας με τα προϊόντα productsSlice - είναι ένας πίνακας στον οποίο υπάρχουν αντικείμενα (στην περίπτωσή μας δύο) με δεδομένα προϊόντων. Πρώτον, εφόσον τώρα θα τα φορτώνουμε από τον διακομιστή, πρέπει να τα αφαιρέσουμε από το initialState. Δεύτερον, θα στέλνουμε στο διακομιστή API αιτήματα και θα είναι σημαντικό για εμάς να γνωρίζουμε την κατάστασή τους. Λαμβάνοντας υπόψη αυτά τα δύο πράγματα, ας αλλάξουμε το initialState. Ας είναι τώρα απλά ένα αντικείμενο με πεδία products (αρχικά δεν θα υπάρχουν δεδομένα εδώ, αλλά απλά ένας κενός πίνακας), status και error. Τώρα ο κώδικάς μας για το initialState θα γίνει λίγο πιο σύντομος:

const initialState = {
	products: [],
	status: 'idle',
	error: null,
}

Προς το παρόν ορίσαμε την κατάσταση 'idle' (αδράνεια), αφού αρχικά δεν στέλνουμε κανένα αίτημα, ενώ γενικά θα αλλάζει και μπορεί να πάρει τιμές 'loading', 'succeeded', 'failed'. Θυμηθείτε ότι για τον προσδιορισμό της κατάστασης μπορείτε να επιλέξετε εκείνα τα ονόματα που θα είναι βολικά για εσάς.

Κατεβαίνουμε πιο κάτω στον κώδικα. Μετά την αλλαγή του initialState, πρέπει να αλλάξουμε και τον κώδικα, στον οποίο δουλεύουμε με αυτήν την κατάσταση στις συναρτήσεις-reducers. Ας δούμε τον κώδικα για το productAdded:

state.push(action.payload)

Τώρα τα νέα προϊόντα θα τα προσθέτουμε όχι απλά στο state για τα προϊόντα, αλλά στην ιδιότητα του state.products. Επομένως, ας αντικαταστήσουμε την παραπάνω γραμμή με:

state.products.push(action.payload)

Αντίστοιχα, ας κάνουμε τις ίδιες αλλαγές για τον reducer reactionClicked. Αντί για:

const currentProduct = state.find((product) => product.id === productId)

Τώρα θα είναι:

const currentProduct = state.products.find((product) => product.id === productId)

Αντικαταστήστε εσείς το state με state.products και στον κώδικα του reducer productUpdated.

Ανοίξτε την εφαρμογή σας με τους μαθητές. Ανοίξτε σε αυτήν το αρχείο studentsSlice.js. Ας έχει τώρα το initialState σας τρεις ιδιότητες: students, status, error - αλλάξτε το, όπως φαίνεται στο μάθημα.

Κάντε τις αντίστοιχες αλλαγές και πιο κάτω στον κώδικα. Αντικαταστήστε το state με state.students στον κώδικα για τις τρεις σας συναρτήσεις-reducers.