Φόρμες και Τοπικές Καταστάσεις στο Redux

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

Ας αρχίσουμε με το γεγονός ότι δεν υπάρχει πάντα λόγος να χρησιμοποιούμε την καθολική κατάσταση του Redux. Υπάρχουν περιπτώσεις όπου για τις ανάγκες μας μπορούμε να δημιουργούμε τοπικές καταστάσεις. Θα ονομάζουμε τοπικές καταστάσεις τις καταστάσεις που χρησιμοποιούνται εντός ενός συγκεκριμένου component για τεχνικές ανάγκες. Για παράδειγμα, για να αποκρύψουμε ή να εμφανίσουμε κάτι με ένα κλικ σε ένα κουμπί.

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

Ας ανοίξουμε το φάκελο products της εφαρμογής μας με τα προϊόντα, να δημιουργήσουμε σε αυτόν το αρχείο NewProductForm.jsx και να εισάγουμε σε αυτό το hook useState:

import { useState } from 'react'

Τώρα ας δημιουργήσουμε το ίδιο το component με τη φόρμα και ας γράψουμε σε αυτό συνηθισμένες καταστάσεις, όπως το κάναμε νωρίτερα στο React. Χρειαζόμαστε καταστάσεις για να δουλέψουμε με το όνομα, την περιγραφή, την τιμή και την ποσότητα του προϊόντος:

export const NewProductForm = () => {
	const [name, setName] = useState('')
	const [desc, setDesc] = useState('')
	const [price, setPrice] = useState(0)
	const [amount, setAmount] = useState(0)
}

Στη συνέχεια, θα προσθέσουμε τυπική επεξεργασία για κάθε πεδίο κατά την εισαγωγή δεδομένων από τον χρήστη:

const onNameChanged = (e) => setName(e.target.value)
const onDescChanged = (e) => setDesc(e.target.value)
const onPriceChanged = (e) => setPrice(e.target.value)
const onAmountChanged = (e) => setAmount(e.target.value)

Και μετά θα επιστρέψουμε στο component markup με την επικεφαλίδα και μια κενή φόρμα:

return (
	<div>
		<h2>Πρόσθεσε ένα Νέο Προϊόν</h2>
		<form>
		</form>
	</div>
)

Ανοίξτε την εφαρμογή σας με τους μαθητές. Δημιουργήστε το αρχείο NewStudentForm.jsx στο φάκελο students. Δημιουργήστε στο component NewStudentForm τοπικές καταστάσεις για τα απαραίτητα σας πεδία, γράψτε για κάθε πεδίο επεξεργασία, όπως φαίνεται στο μάθημα.

Επιστρέψτε στο component NewStudentForm markup, που περιέχει την επικεφαλίδα και μια κενή φόρμα.