Exploring State Management στο React Using Jotai: A Practical Guide

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

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

Τι είναι το Jotai και πώς λειτουργεί;

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

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

εισαγωγή { άτομο } από'γιώται';
συνθ countAtom = άτομο(1);

Για πρόσβαση και εργασία με άτομα στο Jotai, μπορείτε απλά να χρησιμοποιήσετε useAtom αγκίστρι που όπως και άλλα React hooks, σας δίνει τη δυνατότητα πρόσβασης και ενημέρωσης της τιμής μιας κατάστασης μέσα σε ένα λειτουργικό στοιχείο.

Ακολουθεί ένα παράδειγμα για να καταδείξετε τη χρήση του:

εισαγωγή { useAtom } από'γιώται';
συνθ countAtom = άτομο(1);
λειτουργίαMyComponent() {
συνθ [count, setCount] = useAtom (countAtom);
συνθ προσαύξηση = () => setCount((prevCount) => prevCount + 1);
ΕΠΙΣΤΡΟΦΗ (


Καταμέτρηση: {count}</p>
Αύξηση</button>
 </div>
 );
}

Σε αυτό το παράδειγμα, το useAtom Ο γάντζος χρησιμοποιείται για πρόσβαση στο countAtom άτομο και τη σχετική τιμή του. ο setCount Η συνάρτηση χρησιμοποιείται για την ενημέρωση της τιμής του ατόμου και τυχόν συσχετισμένα στοιχεία θα αποδοθούν ξανά αυτόματα με την ενημερωμένη τιμή.

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

Με τα βασικά εκτός λειτουργίας, ας δημιουργήσουμε μια απλή εφαρμογή To-do React για να κατανοήσουμε καλύτερα τις δυνατότητες διαχείρισης κατάστασης του Jotai.

State Management στο React με χρήση Jotai

Για να ξεκινήσετε, δημιουργήστε μια εφαρμογή React. Εναλλακτικά, μπορείτε χρησιμοποιήστε το Vite για να δημιουργήσετε ένα έργο React. Μόλις δημιουργήσετε μια βασική εφαρμογή React, προχωρήστε και εγκαταστήστε το Jotai στην εφαρμογή σας.

npm εγκατάσταση jotai

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

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

εισαγωγή { Πάροχος } από"γιώται";

Τώρα τυλίξτε την εφαρμογή στο index.js ή main.jsx όπως φαίνεται παρακάτω.

εισαγωγή Αντιδρώ από'αντιδρώ'
εισαγωγή ReactDOM από'react-dom/client'
εισαγωγή App από"./App.jsx"
εισαγωγή"./index.css"
εισαγωγή { Πάροχος } από"γιώται";
ReactDOM.createRoot(έγγραφο.getElementById('ρίζα')).καθιστώ(



 </Provider>
 </React.StrictMode>,
)

Διαμορφώστε ένα χώρο αποθήκευσης δεδομένων

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

Σε αυτήν την περίπτωση, διαχειρίζεται τα άτομα για τη διαχείριση της λίστας στοιχείων για την εφαρμογή To-do. Στο src κατάλογος, δημιουργία TodoStore.jsx αρχείο και προσθέστε τον παρακάτω κώδικα.

εισαγωγή { άτομο } από"γιώται";
εξαγωγήσυνθ TodosAtom = άτομο([]);

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

Εφαρμόστε τη Λειτουργικότητα της εφαρμογής To-Do

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

Δημιούργησε ένα νέο components/Todo.jsx αρχείο στο src Ευρετήριο. Σε αυτό το αρχείο, προσθέστε τον παρακάτω κώδικα:

1. Εισαγάγετε το χώρο αποθήκευσης δεδομένων και το useAtom άγκιστρο.

   εισαγωγή React, { useState } από'αντιδρώ';
   εισαγωγή { TodosAtom } από"../TodoStore";
   εισαγωγή { useAtom } από'γιώται';

2. Δημιουργήστε το λειτουργικό στοιχείο και προσθέστε τα στοιχεία JSX.

   συνθ Todo = () => {
   
   ΕΠΙΣΤΡΟΦΗ (
   
   
    placeholder="Νέα δουλειά"
    value={value}
    onChange={event => setValue (event.target.value)}
    />
   Προσθήκη Todo</button>
   
   
    {todos.map(να κάνω => (
   
   
    {todo.text}
    handleDelete (todo.id)}>Διαγραφή</button>
    </li>
    ))}
    </ul>
    </div>
    );
   };