Δύο Βασικές Ιδέες στο Redux

Πριν ξεκινήσουμε τη μελέτη της βιβλιοθήκης Redux, ας γνωρίσουμε δύο βασικές της ιδέες. Την πρώτη ιδέα, που αφορά τον χειρισμό της κατάστασης, θα την εξετάσουμε με το παράδειγμα ενός κανονικού μετρητή σε κατάσταση στο React:

function Counter() {
	// Κατάσταση
	const [count, setCount] = useState(0)

	// Δράση:
	function clickHandler() {
		setCount(count + 1)
	}

	// Παρουσίαση:
	return (
		<div>
			<span>{count}</span>
			<button onClick={clickHandler}>+</button>
		</div>
	)
}

Σε αυτόν τον κώδικα βλέπουμε την κατάσταση για τη μεταβλητή count - αυτή είναι η πηγή αλήθειας για τον μετρητή. Στη συνέχεια βλέπουμε μια δράση (action) - ένα συμβάν, που με κλικ του χρήση προκαλεί την ενημέρωση της κατάστασης. Και, τέλος, την παρουσίαση (view), με την οποία εμφανίζουμε τη διεπαφή χρήστη.

Έτσι, το σχήμα είναι αρκετά απλό: πατιέται το κουμπί - η κατάσταση count (State) με πάτημα (Action) αλλάζει, συνεπώς αλλάζει και η παρουσίαση (View) - στην περίπτωσή μας είναι ο αριθμός στην οθόνη.

Ωστόσο, όλα θα γίνουν πιο πολύπλοκα αν έχουμε πολλά στοιχεία που πρέπει να χρησιμοποιούν την ίδια κατάσταση. Μπορούμε, βέβαια, για παράδειγμα να ανυψώσουμε την κατάσταση σε γονικά στοιχεία, αλλά μια τέτοια λύση δεν μπορεί πάντα να λύσει το πρόβλημα. Το Redux σε αυτή την περίπτωση μας προτείνει να δημιουργήσουμε ένα μέρος στην εφαρμογή, που θα περιέχει την καθολική κατάσταση και συγκεκριμένα μοτίβα συμπεριφοράς κατά την ενημέρωση αυτής της κατάστασης. Ακριβώς σε αυτό συνίσταται η πρώτη βασική ιδέα (!).

Η δεύτερη ιδέα σχετίζεται με την αμεταβλητότητα, δηλαδή με το να μην αλλάζουν τα δεδομένα. Θα θυμάστε, φυσικά, από το JavaScript, ότι οι πίνακες και τα αντικείμενα μπορούν να αλλάξουν. Η αλλαγή δεδομένων απευθείας στο Redux, όπως και σε άλλα πλαίσια, θεωρείται κακή πρακτική και μπορεί να οδηγήσει σε απρόβλεπτες συνέπειες. Γι' αυτό στο Redux τα αρχικά μας αντικείμενα και πίνακες πρέπει να παραμένουν αμετάβλητα, ενώ μπορούμε να αλλάξουμε μόνο τα αντίγραφά τους.

Εξηγήστε, σε τι συνίσταται η πρώτη βασική ιδέα του Redux.

Εξηγήστε, σε τι συνίσταται η δεύτερη βασική ιδέα του Redux.