Istraživanje upravljanja stanjem u Reactu pomoću Jotaija: Praktični vodič

Upravljanje stanjem u projektima malih razmjera općenito je jednostavno korištenjem React kuka i rekvizita. Međutim, kako aplikacija raste i javlja se potreba za dijeljenjem i pristupom podacima preko različitih komponenti, to često dovodi do propelernog bušenja. Nažalost, propelersko bušenje može brzo zatrpati bazu koda i uvesti izazove skalabilnosti.

Iako Redux nudi odlično rješenje za upravljanje stanjem, njegov API može biti neodoljiv za relativno male projekte. Nasuprot tome, Jotai, minimalna biblioteka za upravljanje stanjem koja za upravljanje koristi neovisne jedinice stanja koje se nazivaju atomi stanje, eliminira izazove kao što je propelersko bušenje i omogućuje jednostavnije i skalabilnije upravljanje stanjem pristup.

Što je Jotai i kako djeluje?

Jotai je biblioteka za upravljanje stanjem koja nudi jednostavno rješenje za upravljanje stanjem za razliku od složenijih alternativa poput Reduxa. Za upravljanje stanjem u aplikaciji React koristi neovisne jedinice stanja koje se nazivaju atomi.

U idealnom slučaju, različite komponente u aplikaciji pristupaju i ažuriraju te atome pomoću kuke koju nudi Jotai pod nazivom useAtom. Evo jednostavnog primjera kako stvoriti Jotai atom:

uvoz { atom } iz'jotai';
konst countAtom = atom(1);

Da biste pristupili i radili s atomima u Jotaiju, možete jednostavno koristiti useAtom kuka koja, kao i dr Reagirajte kuke, omogućuje vam pristup i ažuriranje vrijednosti stanja unutar funkcionalne komponente.

Evo primjera za demonstraciju njegove upotrebe:

uvoz {useAtom} iz'jotai';
konst countAtom = atom(1);
funkcijaMoja komponenta() {
konst [count, setCount] = useAtom (countAtom);
konst prirast = () => setCount((prevCount) => prevCount + 1);
povratak (


Broj: {count}</p>
Povećanje</button>
 </div>
 );
}

U ovom primjeru, useAtom kuka se koristi za pristup countAtom atom i njegova pridružena vrijednost. The setCount koristi se za ažuriranje vrijednosti atoma i sve povezane komponente automatski će se ponovno prikazati s ažuriranom vrijednošću.

Pokrećući samo zahvaćene komponente, smanjuje nepotrebno ponovno renderiranje u aplikaciji. Ovaj ciljani pristup ponovnom prikazivanju poboljšava ukupnu izvedbu aplikacije.

Nakon što smo riješili osnove, napravimo jednostavnu aplikaciju To-do React kako bismo bolje razumjeli Jotaijeve mogućnosti upravljanja stanjem.

Upravljanje stanjem u Reactu pomoću Jotaija

Započeti, izraditi React aplikaciju. Alternativno, možete upotrijebite Vite za postavljanje React projekta. Nakon što izradite skelu osnovne React aplikacije, samo naprijed i instalirajte Jotai u svoju aplikaciju.

npm instalirajte jotai

Dalje, da biste upotrijebili Jotai u svojoj aplikaciji, trebate omotati cijelu aplikaciju s Davatelj komponenta. Ova komponenta sadrži pohranu koja služi kao središnje središte za pružanje atomskih vrijednosti u cijeloj aplikaciji.

Osim toga, omogućuje vam deklariranje početnog stanja atoma. Omotavanjem svoje aplikacije s Davatelj, sve komponente u aplikaciji dobivaju pristup atomima koje ste definirali, a zatim mogu komunicirati s njima i ažurirati stanje putem useAtom kuka.

uvoz { Pružatelj } iz"jotai";

Sada zamotajte aplikaciju u index.js ili glavni.jsx kako je prikazano dolje.

uvoz Reagirati iz'reagirati'
uvoz ReactDOM iz'react-dom/client'
uvoz aplikacija iz'./App.jsx'
uvoz'./index.css'
uvoz { Pružatelj } iz"jotai";
ReactDOM.createRoot(dokument.getElementById('korijen')).render(



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

Konfigurirajte pohranu podataka

Trgovina djeluje kao središnji repozitorij za stanje aplikacije. Obično sadrži definiciju atoma, selektora i bilo koje druge povezane funkcije potrebne za upravljanje stanjem pomoću Jotaija.

U ovom slučaju, upravlja atomima za upravljanje popisom stavki za aplikaciju To-do. u src imenik, stvoriti TodoStore.jsx datoteku i dodajte kod u nastavku.

uvoz { atom } iz"jotai";
izvozkonst TodosAtom = atom([]);

Stvaranjem i izvozom TodosAtom, možete ugodno komunicirati i ažurirati stanje zadataka u različitim komponentama aplikacije.

Implementirajte funkcionalnost aplikacije To-Do

Sada kada ste konfigurirali Jotai u aplikaciji React i stvorili atom za upravljanje stanjem aplikacije, idite unaprijed i izradite jednostavnu komponentu za obavljanje zadataka koja će upravljati funkcijama dodavanja, brisanja i uređivanja za zadatak stavke.

Stvorite novi komponente/Todo.jsx datoteka u src imenik. U ovu datoteku dodajte kod u nastavku:

1. Uvezite pohranu podataka i useAtom kuka.

   uvoz Reagiraj, {useState} iz'reagirati';
   uvoz {TodosAtom} iz'../TodoStore';
   uvoz {useAtom} iz'jotai';

2. Izradite funkcionalnu komponentu i dodajte JSX elemente.

   konst Todo = () => {
   
   povratak (
   
   
    rezervirano mjesto="Novi zadatak"
    vrijednost={vrijednost}
    onChange={event => setValue (event.target.value)}
    />
   Dodaj Todo</button>
   
   
    {todos.map(napraviti => (
   
   
    {todo.text}
    handleDelete (todo.id)}>Delete</button>
    </li>
    ))}
    </ul>
    </div>
    );
   };