Skúmanie štátnej správy v React pomocou Jotai: Praktická príručka

Riadenie stavu v malých projektoch je vo všeobecnosti jednoduché pomocou hákov a rekvizít React. Ako sa však aplikácia rozrastá a vzniká potreba zdieľať a pristupovať k dátam naprieč rôznymi komponentmi, často to vedie k vŕtaniu podpier. Bohužiaľ, vŕtanie podpier môže rýchlo zaplniť kódovú základňu a priniesť problémy so škálovateľnosťou.

Zatiaľ čo Redux ponúka skvelé riešenie správy stavu, jeho API môže byť pre relatívne malé projekty ohromujúce. Naproti tomu Jotai, minimálna knižnica pre správu stavu, ktorá využíva na správu nezávislé jednotky štátov nazývané atómy stave, eliminuje problémy, ako je vŕtanie vrtule, a umožňuje jednoduchšie a škálovateľnejšie riadenie stavu prístup.

Čo je to Jotai a ako to funguje?

Jotai je knižnica správy stavu, ktorá ponúka jednoduché riešenie správy stavu na rozdiel od zložitejších alternatív, ako je Redux. Na riadenie stavu v aplikácii React využíva nezávislé jednotky stavu nazývané atómy.

V ideálnom prípade rôzne komponenty v aplikácii pristupujú a aktualizujú tieto atómy pomocou háku, ktorý poskytuje Jotai s názvom useAtom. Tu je jednoduchý príklad, ako vytvoriť atóm Jotai:

importovať { atóm } od'jotai';
konšt pocetAtom = atom(1);

Na prístup a prácu s atómami v Jotai môžete jednoducho použiť useAtom háčik, ktorý ako iné Reagovať háčiky, vám umožňuje pristupovať a aktualizovať hodnotu stavu v rámci funkčného komponentu.

Tu je príklad, ktorý demonštruje jeho použitie:

importovať { useAtom } od'jotai';
konšt pocetAtom = atom(1);
funkciuMyComponent() {
konšt [count, setCount] = useAtom (countAtom);
konšt prírastok = () => setCount((prevCount) => prevCount + 1);
vrátiť (


Počet: {count}</p>
Prírastok</button>
 </div>
 );
}

V tomto príklade useAtom hák sa používa na prístup k countAtom atóm a s ním spojená hodnota. The setCount funkcia sa používa na aktualizáciu hodnoty atómu a všetky súvisiace komponenty sa automaticky znova vykreslia s aktualizovanou hodnotou.

Spúšťaním iba ovplyvnených komponentov znižuje zbytočné opätovné vykresľovanie v rámci aplikácie. Tento cielený prístup k opätovnému vykresľovaniu zlepšuje celkový výkon aplikácie.

So základmi z cesty, poďme vytvoriť jednoduchú aplikáciu To-do React, aby sme lepšie pochopili možnosti správy stavu Jotai.

Riadenie stavu v React Using Jotai

Začať, vytvorte aplikáciu React. Prípadne môžete použite Vite na nastavenie projektu React. Keď vytvoríte základnú aplikáciu React, pokračujte a nainštalujte si Jotai do svojej aplikácie.

npm nainštalovať jotai

Ďalej, aby ste mohli používať Jotai vo svojej aplikácii, musíte zabaliť celú aplikáciu do Poskytovateľ komponent. Tento komponent obsahuje úložisko, ktoré slúži ako centrálny rozbočovač na poskytovanie hodnôt atómov v celej aplikácii.

Okrem toho vám umožňuje deklarovať počiatočný stav atómov. Zabalením aplikácie do súboru Poskytovateľ, všetky komponenty v aplikácii získajú prístup k atómom, ktoré ste definovali, a potom môžu interagovať a aktualizovať stav prostredníctvom useAtom háčik.

importovať { Poskytovateľ } od"jotai";

Teraz zabaľte aplikáciu do index.js alebo main.jsx ako je ukázané nižšie.

importovať Reagovať od'reagovať'
importovať ReactDOM od'react-dom/client'
importovať App od'./App.jsx'
importovať'./index.css'
importovať { Poskytovateľ } od"jotai";
ReactDOM.createRoot(dokument.getElementById('root')).vykresliť(



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

Nakonfigurujte úložisko údajov

Obchod funguje ako centrálne úložisko pre stav aplikácie. Zvyčajne obsahuje definíciu atómov, selektorov a akýchkoľvek ďalších súvisiacich funkcií potrebných na riadenie stavu pomocou Jotai.

V tomto prípade spravuje atómy pre správu zoznamu položiek pre aplikáciu To-do. V src adresár, vytvoriť TodoStore.jsx súbor a pridajte kód nižšie.

importovať { atóm } od"jotai";
exportkonšt TodosAtom = atóm ([]);

Vytvorením a exportom TodosAtom, môžete pohodlne komunikovať a aktualizovať stav úloh v rôznych komponentoch aplikácie.

Implementujte funkčnosť aplikácie To-Do

Teraz, keď ste nakonfigurovali Jotai v aplikácii React a vytvorili atóm na správu stavu aplikácie, choďte dopredu a vytvorte jednoduchý komponent úloh, ktorý bude spracovávať funkcie pridávania, odstraňovania a úpravy úloh položky.

Vytvorte nový komponenty/Todo.jsx súbor v src adresár. Do tohto súboru pridajte kód nižšie:

1. Importujte úložisko údajov a useAtom háčik.

   importovať Reagovať, { useState } od'reagovať';
   importovať { TodosAtom } od'../TodoStore';
   importovať { useAtom } od'jotai';

2. Vytvorte funkčný komponent a pridajte prvky JSX.

   konšt Todo = () => {
   
   vrátiť (
   
   
    zástupný symbol ="Nová úloha"
    value={value}
    onChange={event => setValue (event.target.value)}
    />
   Pridať úlohu</button>
   
   
    {todos.map(robiť => (
   
   
    {todo.text}
    handleDelete (todo.id)}>Delete</button>
    </li>
    ))}
    </ul>
    </div>
    );
   };