Κατά τη διαχείριση πολύπλοκων καταστάσεων σε μια εφαρμογή Επόμενο, τα πράγματα μπορεί να γίνουν γρήγορα δύσκολα. Παραδοσιακά αγκίστρια όπως χρήση Κατάσταση ενισχύσεις με κρατική διαχείριση αλλά παρουσιάζουν θέμα γεώτρησης υποστηρίγματος. Η διάτρηση στηρίγματος σημαίνει τη μετάδοση δεδομένων ή λειτουργιών μέσω πολλών εξαρτημάτων.

Μια καλύτερη προσέγγιση θα ήταν ο διαχωρισμός της λογικής διαχείρισης κατάστασης από τα στοιχεία και η ενημέρωση αυτών των καταστάσεων από οπουδήποτε στην εφαρμογή σας. Θα σας καθοδηγήσουμε πώς να χρησιμοποιήσετε το Context API καθώς δημιουργούμε μια απλή εφαρμογή λίστας υποχρεώσεων.

Πριν ξεκινήσετε τη λίστα εργασιών σας

Για να μπορέσετε να δημιουργήσετε την εφαρμογή λίστας υποχρεώσεων, θα χρειαστείτε:

• Βασικές γνώσεις για σύγχρονους χειριστές JavaScript και Το React's useState hook.
• Μια κατανόηση του πώς να καταστροφή συστοιχιών και αντικειμένων σε JavaScript.
• Κόμβος έκδοση 16.8 ή μεταγενέστερη εγκατεστημένη στον τοπικό σας υπολογιστή και εξοικείωση με διαχειριστές πακέτων όπως το npm ή νήματα.

Μπορείτε να βρείτε το ολοκληρωμένο έργο στο GitHub για αναφορά και περαιτέρω εξερεύνηση.

Κατανόηση της κατάστασης εφαρμογής και της διαχείρισης

Η κατάσταση εφαρμογής αναφέρεται στην τρέχουσα κατάσταση μιας εφαρμογής σε μια δεδομένη χρονική στιγμή. Αυτό περιλαμβάνει πληροφορίες που γνωρίζει και διαχειρίζεται η εφαρμογή, όπως εισαγωγές χρήστη και δεδομένα που λαμβάνονται από μια βάση δεδομένων ή ένα API (Διεπαφή Προγραμματισμού Εφαρμογών).

Για να κατανοήσετε την κατάσταση εφαρμογής, εξετάστε τις πιθανές καταστάσεις μιας απλής εφαρμογής μετρητή. Περιλαμβάνουν:

• Η προεπιλεγμένη κατάσταση όταν ο μετρητής είναι στο μηδέν.
• Αυξημένη κατάσταση όταν ο μετρητής αυξηθεί κατά ένα.
• Μειωμένη κατάσταση όταν ο μετρητής μειωθεί κατά ένα.
• Κατάσταση επαναφοράς όταν ο μετρητής επιστρέψει στην προεπιλεγμένη του κατάσταση.

Ένα στοιχείο React μπορεί να εγγραφεί σε αλλαγές κατάστασης. Όταν ένας χρήστης αλληλεπιδρά με ένα τέτοιο στοιχείο, οι ενέργειές του—όπως τα κλικ κουμπιών—μπορούν να διαχειριστούν τις ενημερώσεις στην κατάσταση.

Αυτό το απόσπασμα εμφανίζει μια απλή εφαρμογή μετρητή, στην προεπιλεγμένη της κατάσταση, που διαχειρίζεται την κατάσταση με βάση τις ενέργειες κλικ:

συνθ [counter, setCounter] = useState(0);
ΕΠΙΣΤΡΟΦΗ (

{αντί</h1>
 setCounter (μετρητής + 1)}>αύξηση</button>
 setCounter (counter - 1)}>μείωση</button>
 setCounter(0)}>επαναφορά</button>
 </main>
);

Ρύθμιση και εγκατάσταση

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

Κλωνοποίηση της εφαρμογής εκκίνησης

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

git κλώνος -β μίζα https://github.com/makeuseofcode/Next.js-CRUD-todo-app.git

Εκτελέστε την ακόλουθη εντολή, στον κατάλογο του έργου, για να εγκαταστήσετε τις εξαρτήσεις και να ξεκινήσετε τον διακομιστή ανάπτυξης:

νήμα && νήμα dev

Ή:

npm i && npm εκτέλεση dev

Εάν όλα πήγαν καλά, η διεπαφή χρήστη θα πρέπει να εμφανίζεται στο πρόγραμμα περιήγησής σας:

Εφαρμογή της Λογικής

Το Context API παρέχει έναν τρόπο διαχείρισης και κοινής χρήσης δεδομένων κατάστασης μεταξύ των στοιχείων, χωρίς την ανάγκη χειροκίνητης διάτρησης στηρίγματος.

Βήμα 1: Δημιουργία και εξαγωγή περιβάλλοντος

Δημιουργώ ένα src/app/context φάκελο για να αποθηκεύσετε το αρχείο περιβάλλοντος και να διατηρήσετε τον κατάλογο του έργου καλά οργανωμένο. Μέσα σε αυτόν τον φάκελο, δημιουργήστε ένα todo.context.jsx αρχείο που θα περιέχει όλη τη λογική περιβάλλοντος για την εφαρμογή.

Εισαγάγετε το createContext λειτουργία από το αντιδρώ βιβλιοθήκη και καλέστε το, αποθηκεύοντας το αποτέλεσμα σε μια μεταβλητή:

εισαγωγή {createContext} από"αντιδρώ";
συνθ TodoContext = createContext();

Στη συνέχεια, δημιουργήστε ένα έθιμο useTodoContext γάντζος που επιστρέφει TodoContext στη χρησιμοποιήσιμη μορφή του.

εξαγωγήσυνθ useTodoContext = () => useContext (TodoContext);

Βήμα 2: Δημιουργία και διαχείριση κρατών

Για να εκτελέσετε τις ενέργειες CRUD (Δημιουργία, Ανάγνωση, Ενημέρωση, Διαγραφή) της εφαρμογής, θα χρειαστεί να δημιουργήσετε τις καταστάσεις και να τις διαχειριστείτε με το Προμηθευτής συστατικό.

συνθ TodoContextProvider = ({παιδια}) => {
συνθ [task, setTask] = useState("");
συνθ [tasks, setTasks] = useState([]);
ΕΠΙΣΤΡΟΦΗ<TodoContext. Προμηθευτήςαξία={{}}>{παιδιά}TodoContext. Προμηθευτής>;
};
εξαγωγήΠροκαθορισμένο TodoContextProvider;

Λίγο πριν το ΕΠΙΣΤΡΟΦΗ δήλωση, δημιουργία α handleTodoInput λειτουργία που θα εκτελείται όταν ο χρήστης πληκτρολογεί μια υποχρέωση. Αυτή η λειτουργία στη συνέχεια ενημερώνει το έργο κατάσταση.

συνθ handleTodoInput = (εισαγωγή) => setTask (είσοδος);

Πρόσθεσε ένα createTask λειτουργία που θα εκτελείται όταν ένας χρήστης υποβάλλει μια υποχρέωση. Αυτή η λειτουργία ενημερώνει το καθήκοντα κατάσταση και εκχωρεί στη νέα εργασία ένα τυχαίο αναγνωριστικό.

συνθ createTask = (μι) => {
 e.preventDefault();
 setTasks([
 {
 ταυτότητα: Μαθηματικά.trunc(Μαθηματικά.random() * 1000 + 1),
 έργο,
 },
 ...καθήκοντα,
 ]);
 };

Δημιουργήστε ένα updateTask συνάρτηση που χαρτογραφεί μέσω του καθήκοντα λίστα και ενημερώνει την εργασία της οποίας το αναγνωριστικό αντιστοιχεί στο αναγνωριστικό της εργασίας στην οποία έγινε κλικ.

συνθ updateTask = (id, updateText) =>
 setTasks (tasks.map((t) => (t.id id? { ...t, έργο: updateText }: t)));

Δημιουργώ ένα deleteTask λειτουργία που ενημερώνει το καθήκοντα λίστα, ώστε να περιλαμβάνει όλες τις εργασίες των οποίων το αναγνωριστικό δεν ταιριάζει με τη δεδομένη παράμετρο.

συνθ deleteTask = (ταυτότητα) => setTasks (tasks.filter((t) => t.id !== id));

Βήμα 3: Προσθήκη πολιτειών και χειριστών στον πάροχο

Τώρα έχετε δημιουργήσει τις καταστάσεις και έχετε γράψει κώδικα για να τις διαχειρίζεστε, πρέπει να κάνετε αυτές τις καταστάσεις και τις λειτουργίες χειριστή διαθέσιμες στο Προμηθευτής. Μπορείτε να τα παρέχετε με τη μορφή αντικειμένου, χρησιμοποιώντας το αξία ιδιοκτησία του Προμηθευτής συστατικό.

ΕΠΙΣΤΡΟΦΗ (
 αξία={{
 έργο,
 καθήκοντα,
 handleTodoInput,
 createTask,
 updateTask,
 deleteTask,
 }}
 >
 {παιδιά}
 </TodoContext.Provider>
);

Βήμα 4: Εμβέλεια του πλαισίου

ο Προμηθευτής που δημιουργήσατε πρέπει να τυλίξετε το στοιχείο ανώτατου επιπέδου για να κάνετε το περιβάλλον διαθέσιμο σε ολόκληρη την εφαρμογή. Για να το κάνετε αυτό, επεξεργαστείτε src/app/page.jsx και τυλίξτε το Todos συστατικό με το TodoContextProvider συστατικό:

;
</TodoContextProvider>;

Βήμα 5: Χρησιμοποιήστε το Context στα Components

Επεξεργαστείτε το δικό σας src/app/components/Todos.jsx αρχείο και καταστροφή καθήκοντα, καθήκον, handleTodoInput, και createTask μέσω κλήσης στο useTodoContext λειτουργία.

συνθ { task, tasks, handleTodoInput, createTask } = useTodoContext();

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

 createTask (ε)}>
"todo-input" τύπος="κείμενο" placeholder="Εισαγάγετε μια εργασία" απαιτούμενη τιμή={task} onChange={(e) => handleTodoInput (e.target.value)} />
"υποβολή-εκτέλεση" τύπος="υποβάλλουν" αξία="Προσθήκη εργασίας" />
</form>

Βήμα 6: Απόδοση εργασιών στη διεπαφή χρήστη

Τώρα μπορείτε να χρησιμοποιήσετε την εφαρμογή για να δημιουργήσετε και να προσθέσετε μια εργασία στο καθήκοντα λίστα. Για να ενημερώσετε την οθόνη, θα χρειαστεί να αντιστοιχίσετε τα υπάρχοντα καθήκοντα και να τα αποδώσει στη διεπαφή χρήστη. Πρώτα, δημιουργήστε ένα src/app/components/Todo.jsx συστατικό για να κρατήσει ένα μεμονωμένο αντικείμενο.

Μέσα στο src/app/components/Todo.jsx συστατικό, επεξεργαστείτε ή διαγράψτε μια εργασία επικαλώντας το updateTask και deleteTask λειτουργίες που δημιουργήσαμε src/app/context/todo.context.jsx αρχείο.

εισαγωγή React, { useState } από"αντιδρώ";
εισαγωγή { useTodoContext } από"../context/todo.context";
συνθ Todo = ({ εργασία }) => {
συνθ { updateTask, deleteTask } = useTodoContext();
// isEdit παρακολουθεί την κατάσταση όταν μια εργασία βρίσκεται σε λειτουργία επεξεργασίας
συνθ [isEdit, setIsEdit] = useState(ψευδής);
ΕΠΙΣΤΡΟΦΗ (

"todo-wrapper">


 {isEdit? ( <εισαγωγήτύπος="κείμενο"αξία={task.task}
 onChange={(e) => updateTask (task.id, e.target.value)} /> ):
 (<ουόνομα τάξης="έργο">{task.task}ου> )}


"Ενέργειες">
"επεξεργασία"
 onClick={() => setIsEdit(!isEdit)}> {isEdit? "Αποθηκεύσετε": "Επεξεργασία"} </button> 
 deleteTask (task.id)}>Διαγραφή</button>
 </td>
 </tr>
 </tbody>
 </table>
 );
};



εξαγωγήΠροκαθορισμένο Να κάνω;

Για να αποδώσει το src/app/components/Todo.jsx συστατικό για το καθένα έργο, πηγαίνετε στο src/app/components/Todos.jsx αρχείο και υπό όρους αντιστοίχιση μέσω του καθήκοντα αμέσως μετά το επί κεφαλής ετικέτα κλεισίματος.

{καθήκοντα && (

 {tasks.map((καθήκον, θ) => ( <Να κάνωκλειδί={Εγώ}έργο={έργο} /> ))}
</main>
)}

Δοκιμάστε την εφαρμογή σας σε ένα πρόγραμμα περιήγησης και επιβεβαιώστε ότι δίνει το αναμενόμενο αποτέλεσμα.

Αποθήκευση εργασιών στον τοπικό χώρο αποθήκευσης

Επί του παρόντος, η ανανέωση της σελίδας θα επαναφέρει τις εργασίες, απορρίπτοντας ό, τι έχετε δημιουργήσει. Ένας τρόπος για να διορθώσετε αυτό το πρόβλημα είναι η αποθήκευση των εργασιών στον τοπικό χώρο αποθήκευσης του προγράμματος περιήγησης.

Το API αποθήκευσης Ιστού είναι μια βελτίωση στον χώρο αποθήκευσης cookie, με λειτουργίες που βελτιώνουν την εμπειρία τόσο για τους χρήστες όσο και για τους προγραμματιστές.