Explorarea managementului de stat în React folosind Jotai: un ghid practic

Gestionarea stării în proiecte la scară mică este, în general, simplă, folosind cârlige și elemente de recuzită React. Cu toate acestea, pe măsură ce aplicația crește și apare nevoia de a partaja și de a accesa date între diferite componente, deseori duce la forarea cu suport. Din păcate, găurirea cu prop poate aglomera rapid baza de cod și poate introduce provocări de scalabilitate.

În timp ce Redux oferă o soluție excelentă de gestionare a stării, API-ul său poate fi copleșitor pentru proiecte relativ mici. În contrast, Jotai, o bibliotecă minimă de management de stat care folosește unități independente de state numite atomi pentru a gestiona stare, elimină provocările cum ar fi forarea prop și permite o gestionare a stării mai simplă și mai scalabilă abordare.

Ce este Jotai și cum funcționează?

Jotai este o bibliotecă de management de stat care oferă o soluție simplă de management de stat, în contrast cu alternative mai complexe precum Redux. Utilizează unități independente de stare numite atomi pentru a gestiona starea în aplicația React.

În mod ideal, diferite componente din aplicație accesează și actualizează acești atomi folosind un cârlig oferit de Jotai numit foloseșteAtom. Iată un exemplu simplu despre cum să creați un atom Jotai:

import { atom } din'jotai';
const countAtom = atom(1);

Pentru a accesa și a lucra cu atomi în Jotai, puteți utiliza pur și simplu foloseșteAtom cârlig care, ca altele Cârlige de reacție, vă permite să accesați și să actualizați valoarea unei stări într-o componentă funcțională.

Iată un exemplu pentru a demonstra utilizarea acestuia:

import { useAtom } din'jotai';
const countAtom = atom(1);
funcţieMyComponent() {
const [count, setCount] = useAtom (countAtom);
const increment = () => setCount((prevCount) => prevCount + 1);
întoarcere (


Count: {count}</p>
Incrementare</button>
 </div>
 );
}

În acest exemplu, foloseșteAtom cârlig este folosit pentru a accesa countAtom atom și valoarea asociată acestuia. The setCount funcția este utilizată pentru a actualiza valoarea atomului și orice componente asociate vor fi redate automat cu valoarea actualizată.

Prin declanșarea doar a componentelor afectate, reduce redările inutile în aplicație. Această abordare direcționată a redării îmbunătățește performanța generală a aplicației.

Cu elementele de bază la o parte, haideți să construim o aplicație simplă To-do React pentru a înțelege mai bine capacitățile de gestionare a statului ale lui Jotai.

Managementul de stat în React folosind Jotai

Pentru a incepe, creați o aplicație React. Alternativ, puteți utilizați Vite pentru a configura un proiect React. Odată ce ați montat o aplicație React de bază, continuați și instalați Jotai în aplicația dvs.

npm instalează jotai

Apoi, pentru a utiliza Jotai în aplicația dvs., trebuie să împachetați întreaga aplicație cu Furnizor componentă. Această componentă conține magazinul care servește drept hub central pentru furnizarea de valori atomice în întreaga aplicație.

În plus, vă permite să declarați starea inițială a atomilor. Prin împachetarea aplicației dvs. cu Furnizor, toate componentele din aplicație obțin acces la atomii pe care i-ați definit și apoi pot interacționa cu și actualiza starea prin intermediul foloseșteAtom cârlig.

import { Furnizor } din"jotai";

Acum împachetați aplicația în index.js sau main.jsx așa cum se arată mai jos.

import Reacţiona din'reacţiona'
import ReactDOM din„react-dom/client”
import App din„./App.jsx”
import„./index.css”
import { Furnizor } din"jotai";
ReactDOM.createRoot(document.getElementById('rădăcină')).face(



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

Configurați un depozit de date

Magazinul acționează ca un depozit central pentru starea aplicației. Conține de obicei definiția atomilor, selectoarelor și a oricăror alte funcții conexe necesare pentru managementul statului folosind Jotai.

În acest caz, gestionează atomii pentru gestionarea listei de articole pentru aplicația To-do. În src director, creați TodoStore.jsx fișier și adăugați codul de mai jos.

import { atom } din"jotai";
exportconst TodosAtom = atom([]);

Prin crearea și exportul TodosAtom, puteți interacționa confortabil și actualiza starea sarcinilor de făcut în diferite componente ale aplicației.

Implementați funcționalitatea aplicației To-Do

Acum că ați configurat Jotai în aplicația React și ați creat un atom pentru a gestiona starea aplicației, mergeți înainte și creați o componentă simplă de făcut, care se va ocupa de funcționalitățile de adăugare, ștergere și editare pentru sarcini de făcut articole.

Creaza un nou componente/Todo.jsx dosar în src director. În acest fișier, adăugați codul de mai jos:

1. Importați depozitul de date și foloseșteAtom cârlig.

   import Reacționează, { useState } din'reacţiona';
   import { TodosAtom } din„../TodoStore”;
   import { useAtom } din'jotai';

2. Creați componenta funcțională și adăugați elementele JSX.

   const Todo = () => {
   
   întoarcere (
   
   
    substituent="Toate noi"
    valoare={valoare}
    onChange={event => setValue (event.target.value)}
    />
   Adăugați Todo</button>
   
   
    {todos.map(a face => (
   
   
    {todo.text}
    handleDelete (todo.id)}>Delete</button>
    </li>
    ))}
    </ul>
    </div>
    );
   };