Raziskovanje upravljanja stanja v Reactu z uporabo Jotai: Praktični vodnik

Upravljanje stanja v projektih majhnega obsega je na splošno preprosto z uporabo kavljev in rekvizitov React. Ko pa aplikacija raste in se pojavi potreba po skupni rabi in dostopu do podatkov med različnimi komponentami, to pogosto vodi do vrtanja s podpornimi napravami. Na žalost lahko oporno vrtanje hitro zamaši kodno zbirko in povzroči izzive razširljivosti.

Medtem ko Redux ponuja odlično rešitev za upravljanje stanja, je lahko njegov API izjemen za relativno majhne projekte. Nasprotno, Jotai, minimalna knjižnica za upravljanje stanja, ki za upravljanje uporablja neodvisne enote držav, imenovane atomi stanja, odpravlja izzive, kot je oporno vrtanje, in omogoča bolj preprosto in razširljivo upravljanje stanja pristop.

Kaj je Jotai in kako deluje?

Jotai je knjižnica za upravljanje stanja, ki ponuja preprosto rešitev za upravljanje stanja v nasprotju z bolj zapletenimi alternativami, kot je Redux. Za upravljanje stanja v aplikaciji React uporablja neodvisne enote stanja, imenovane atomi.

V idealnem primeru različne komponente v aplikaciji dostopajo do teh atomov in jih posodabljajo s pomočjo kljuke, ki jo ponuja Jotai, imenovane useAtom. Tukaj je preprost primer, kako ustvariti atom Jotai:

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

Za dostop in delo z atomi v Jotaiju lahko preprosto uporabite useAtom kavelj, ki tako kot drugi React kljuke, vam omogoča dostop in posodobitev vrednosti stanja znotraj funkcionalne komponente.

Tukaj je primer za prikaz njegove uporabe:

uvoz {useAtom} od'jotai';
konst countAtom = atom(1);
funkcijoMyComponent() {
konst [count, setCount] = useAtom (countAtom);
konst prirast = () => setCount((prevCount) => prevCount + 1);
vrnitev (


Število: {count}</p>
Prirast</button>
 </div>
 );
}

V tem primeru je useAtom kavelj se uporablja za dostop do countAtom atom in z njim povezana vrednost. The setCount se uporablja za posodobitev vrednosti atoma in vse povezane komponente bodo samodejno ponovno upodobljene s posodobljeno vrednostjo.

S sprožitvijo samo prizadetih komponent zmanjša nepotrebno ponovno upodabljanje v aplikaciji. Ta ciljni pristop k ponovnemu upodabljanju izboljša splošno zmogljivost aplikacije.

Ko smo se naučili osnov, izdelajmo preprosto aplikacijo To-do React, da bomo bolje razumeli Jotaijeve zmogljivosti upravljanja stanja.

Upravljanje stanja v Reactu z uporabo Jotai

Za začetek, ustvarite aplikacijo React. Lahko pa tudi uporabite Vite za nastavitev projekta React. Ko ustvarite osnovno aplikacijo React, nadaljujte in namestite Jotai v svojo aplikacijo.

npm namestite jotai

Če želite v svoji aplikaciji uporabiti Jotai, morate celotno aplikacijo oviti z Ponudnik komponento. Ta komponenta vsebuje shrambo, ki služi kot osrednje središče za zagotavljanje atomskih vrednosti v celotni aplikaciji.

Poleg tega vam omogoča, da razglasite začetno stanje atomov. Če svojo aplikacijo ovijete z Ponudnik, vse komponente v aplikaciji pridobijo dostop do atomov, ki ste jih definirali, nato pa lahko komunicirajo z njimi in posodabljajo stanje prek useAtom kavelj.

uvoz {Ponudnik} od"jotai";

Zdaj zavijte aplikacijo v index.js oz main.jsx kot je prikazano spodaj.

uvoz Reagiraj od'reagirati'
uvoz ReactDOM od'react-dom/client'
uvoz aplikacija od'./App.jsx'
uvoz'./index.css'
uvoz {Ponudnik} od"jotai";
ReactDOM.createRoot(dokument.getElementById('root')).render(



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

Konfigurirajte shrambo podatkov

Trgovina deluje kot osrednji repozitorij za stanje aplikacije. Običajno vsebuje definicijo atomov, izbirnikov in vseh drugih povezanih funkcij, potrebnih za upravljanje stanja z uporabo Jotai.

V tem primeru upravlja atome za upravljanje seznama elementov za aplikacijo To-do. V src imenik, ustvari TodoStore.jsx datoteko in dodajte spodnjo kodo.

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

Z ustvarjanjem in izvozom TodosAtom, lahko udobno komunicirate in posodabljate stanje opravil v različnih komponentah v aplikaciji.

Izvedite funkcionalnost aplikacije To-Do

Zdaj, ko ste konfigurirali Jotai v aplikaciji React in ustvarili atom za upravljanje stanja aplikacije, pojdite naprej in ustvarite preprosto komponento opravil, ki bo obravnavala funkcije dodajanja, brisanja in urejanja opravil predmete.

Ustvari novo komponente/Todo.jsx datoteka v src imenik. V to datoteko dodajte spodnjo kodo:

1. Uvozite shrambo podatkov in useAtom kavelj.

   uvoz Odziv, {useState} od'reagirati';
   uvoz {TodosAtom} od'../TodoStore';
   uvoz {useAtom} od'jotai';

2. Ustvarite funkcionalno komponento in dodajte elemente JSX.

   konst Todo = () => {
   
   vrnitev (
   
   
    placeholder="Novo opravilo"
    vrednost={vrednost}
    onChange={event => setValue (event.target.value)}
    />
   Dodaj Todo</button>
   
   
    {todos.map(narediti => (
   
   
    {todo.text}
    handleDelete (todo.id)}>Delete</button>
    </li>
    ))}
    </ul>
    </div>
    );
   };