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

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

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

Κατανόηση του React Context API

Πριν βουτήξετε στον κώδικα, είναι σημαντικό να κατανοήστε τι είναι το React Context API και τι πρόβλημα αντιμετωπίζει.

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

instagram viewer

Αυτή η προσέγγιση είναι χρήσιμη επειδή δείχνει ξεκάθαρα ποια στοιχεία χρησιμοποιούν συγκεκριμένα δεδομένα και πώς αυτά τα δεδομένα ρέουν στο δέντρο συστατικών.

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

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

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

Μπορείτε να βρείτε τον κωδικό αυτού του έργου σε αυτό GitHub αποθήκη.

Ξεκινώντας με τη Διαχείριση κατάστασης στο Next.js 13 Χρήση του React Context API

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

Το Next.js 13 υλοποιεί στοιχεία διακομιστή στο εφαρμογή κατάλογος—ο οποίος είναι πλέον σταθερός—από προεπιλογή. Ωστόσο, επειδή όλα τα στοιχεία αποδίδονται από διακομιστή, ενδέχεται να αντιμετωπίσετε προβλήματα κατά την ενσωμάτωση βιβλιοθηκών ή API από την πλευρά του πελάτη, όπως το React Context.

Για να αποφευχθεί αυτό, μια μεγάλη λύση είναι η χρήση πελάτη σημαία που μπορείτε να ορίσετε σε αρχεία που θα εκτελούν κώδικα από την πλευρά του πελάτη.

Για να ξεκινήσετε, δημιουργήστε ένα έργο Next.js 13 τοπικά εκτελώντας αυτήν την εντολή στο τερματικό σας:

npx create-next-app@latest next-context-api

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

cd next-context-api

Στη συνέχεια, ξεκινήστε τον διακομιστή ανάπτυξης:

npm run dev

Αφού ρυθμίσετε ένα βασικό έργο Next.js, μπορείτε να δημιουργήσετε μια βασική εφαρμογή υποχρεώσεων που χρησιμοποιεί το React Context API για διαχείριση κατάστασης.

Δημιουργήστε τον πάροχο περιβάλλοντος

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

Δημιουργήστε ένα νέο αρχείο, src/context/Todo.context.jsκαι συμπληρώστε τον με τον ακόλουθο κώδικα.

"use client"
import React, { createContext, useReducer } from"react";


const initialState = {
 todos: [],
};


const reducer = (state, action) => {
switch (action.type) {
case"ADD_TODO":
return { ...state, todos: [...state.todos, action.payload] };


case"DELETE_TODO":
return { ...state, todos: state.todos.filter((todo, index) =>
 index !== action.payload) };


case"EDIT_TODO":
const updatedTodos = state.todos.map((todo, index) =>
 index action.payload.index? action.payload.newTodo: todo);
return { ...state, todos: updatedTodos };


default:
return state;
 }
};


exportconst TodoContext = createContext({
 state: initialState,
 dispatch: () =>null,
});


exportconst TodoContextProvider = ({ children }) => {
const [state, dispatch] = useReducer(reducer, initialState);
return (

 {children}
 </TodoContext.Provider>
 );
};

Αυτή η ρύθμιση React Context ορίζει α TodoContext το οποίο αρχικά διατηρεί την κατάσταση μιας κενή λίστας υποχρεώσεων για την εφαρμογή.

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

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

Όταν ένα στοιχείο καταναλώνει το TodoContext, μπορεί να έχει πρόσβαση στην κατάσταση του περιβάλλοντος και να αποστέλλει ενέργειες για την ενημέρωση της κατάστασης.

Προσθέστε τον πάροχο περιβάλλοντος στην εφαρμογή Next.js

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

Για να το κάνετε αυτό, ανοίξτε το src/app/layout.js αρχείο και αναδιπλώστε τον παιδικό κόμβο στο πρότυπο HTML με τον πάροχο περιβάλλοντος ως εξής:

import'./globals.css';
import { TodoContextProvider } from"@/context/Todo.context";
exportconst metadata = {
 title: "Create Next App",
 description: "Generated by create next app",
};
exportdefaultfunctionRootLayout({
 children
}) {
return (
"en">

{children}</TodoContextProvider>
 </body>
 </html>
 );
}

Δημιουργήστε ένα στοιχείο υποχρεώσεων

Δημιουργήστε ένα νέο αρχείο, src/components/Todo.jsκαι προσθέστε τον ακόλουθο κώδικα σε αυτό.

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

"use client"
import { TodoContext } from"@/context/Todo.context";
import React, { useContext, useState } from"react";

Στη συνέχεια, ορίστε το λειτουργικό στοιχείο, συμπεριλαμβανομένων των στοιχείων JSX που θα αποδοθούν στο πρόγραμμα περιήγησης.

exportdefaultfunctionTodo() {
return (
marginBottom: "4rem", textAlign: "center" }}>
Todos</h2>



 type="text"
 value={todoText}
 onChange={(e) => setTodoText(e.target.value)}
 style={{ marginBottom: 16}}
 placeholder="Enter a todo"
 />






    

     {state.todos.map((todo, index) => (
  • 

     {index editingIndex? (
     <>
     type="text"
     value={editedTodo}
     onChange={(e) => setEditedTodo(e.target.value)}
     />
    • 



 style={{ marginRight: 16}} 
 onClick={() => handleEditTodo(index, editedTodo)}
 >
 Save
 </button>
 </>
 ): (
 <>
 {todo}
 style={{ marginRight: 16}} 
 onClick={() => setEditingIndex(index)}
 >Edit</button>


 onClick={() => handleDeleteTodo(index)}
 >Delete</button>
 </>
 )}
 </li>
 ))}
 </ul>
 </div>
 );
}

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

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

const { state, dispatch } = useContext(TodoContext);
const [todoText, setTodoText] = useState("");
const [editingIndex, setEditingIndex] = useState(-1);
const [editedTodo, setEditedTodo] = useState("");
const handleAddTodo = () => {
if (todoText.trim() !== "") {
 dispatch({ type: "ADD_TODO", payload: todoText });
 setTodoText("");
 }
 };


const handleDeleteTodo = (index) => {
 dispatch({ type: "DELETE_TODO", payload: index });
 };
const handleEditTodo = (index, newTodo) => {
 dispatch({ type: "EDIT_TODO", payload: { index, newTodo } });
 setEditingIndex(-1);
 setEditedTodo("");
 };

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

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

Απόδοση του στοιχείου εκκρεμοτήτων

Τέλος, εισαγάγετε το στοιχείο Εκκρεμότητες στο στοιχείο σελίδας.

Για να το κάνετε αυτό, ανοίξτε το αρχείο page.js στον κατάλογο src/app, διαγράψτε τον κώδικα boilerplate Next.js και προσθέστε τον παρακάτω κώδικα:

import styles from'./page.module.css'
import Todo from'../components/Todo'
exportdefaultfunctionHome() {
return (


 </main>
 )
}

Εξαιρετική! Σε αυτό το σημείο, θα πρέπει να μπορείτε να διαχειριστείτε την κατάσταση στην εφαρμογή To-do Next.js χρησιμοποιώντας το React Context.

Χρήση του React Context API με άλλες τεχνολογίες διαχείρισης κατάστασης

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

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