Valtionhallinnan tutkiminen Reactissa Jotain avulla: Käytännön opas

Tilan hallinta pienimuotoisissa projekteissa on yleensä yksinkertaista React-koukkujen ja -kojeiden avulla. Kuitenkin, kun sovellus kasvaa ja tarve jakaa ja käyttää tietoja eri komponenttien välillä ilmenee, se johtaa usein potkuriporaukseen. Valitettavasti potkuriporaus voi nopeasti sotkea koodikannan ja aiheuttaa skaalautuvuushaasteita.

Vaikka Redux tarjoaa loistavan tilanhallintaratkaisun, sen API voi olla ylivoimainen suhteellisen pienille projekteille. Sitä vastoin Jotai, minimaalinen tilanhallintakirjasto, joka hyödyntää itsenäisiä tilojen yksiköitä, joita kutsutaan atomeiksi tilassa, eliminoi haasteet, kuten potkuriporauksen ja mahdollistaa yksinkertaisemman ja skaalautuvamman tilanhallinnan lähestyä.

Mikä Jotai on ja miten se toimii?

Jotai on tilanhallintakirjasto, joka tarjoaa yksinkertaisen tilanhallintaratkaisun toisin kuin monimutkaisemmat vaihtoehdot, kuten Redux. Se käyttää itsenäisiä tilayksiköitä, joita kutsutaan atomeiksi, hallitsemaan tilaa React-sovelluksessa.

Ihannetapauksessa sovelluksen eri komponentit pääsevät käsiksi ja päivittävät näitä atomeja käyttämällä Jotain tarjoamaa koukkua nimeltä the käytäAtom. Tässä on yksinkertainen esimerkki Jotai-atomin luomisesta:

tuonti {atomi } alkaen'jotai';
konst countAtom = atomi(1);

Voit käyttää atomeja ja työskennellä niiden kanssa Jotaissa käyttämällä käytäAtom koukku joka, kuten muutkin Reagoi koukut, antaa sinun käyttää ja päivittää toiminnallisen komponentin tilan arvoa.

Tässä on esimerkki sen käytön havainnollistamiseksi:

tuonti { useAtom } alkaen'jotai';
konst countAtom = atomi(1);
toimintoMyComponent() {
konst [count, setCount] = useAtom (countAtom);
konst lisäys = () => setCount((prevCount) => prevCount + 1);
palata (


Count: {count}</p>
Lisäys </button>
 </div>
 );
}

Tässä esimerkissä käytäAtom koukkua käytetään pääsyyn countAtom atomi ja siihen liittyvä arvo. The setCount -funktiota käytetään atomin arvon päivittämiseen, ja kaikki siihen liittyvät komponentit renderöidään automaattisesti uudelleen päivitetyllä arvolla.

Aktivoimalla vain kyseiset komponentit, se vähentää tarpeettomia uudelleenrenderöintejä sovelluksessa. Tämä kohdennettu lähestymistapa uudelleenrenderöimiseen parantaa sovelluksen yleistä suorituskykyä.

Kun perusasiat ovat poissa tieltä, rakennetaan yksinkertainen To-do React -sovellus ymmärtääksemme paremmin Jotain tilanhallintavalmiuksia.

Valtionhallinta Reactissa Jotailla

Aloita luo React-sovellus. Vaihtoehtoisesti voit käyttää Viteä React-projektin perustamiseen. Kun olet rakentanut React-perussovelluksen, asenna Jotai sovellukseesi.

npm install jotai

Seuraavaksi, jotta voit käyttää Jotaita sovelluksessasi, sinun on käärittävä koko sovelluksesi Palveluntarjoaja komponentti. Tämä komponentti sisältää varaston, joka toimii keskeisenä keskittimenä atomiarvojen tarjoamiselle koko sovelluksessa.

Lisäksi sen avulla voit ilmoittaa atomien alkutilan. Käärimällä sovelluksesi Palveluntarjoaja, kaikki sovelluksen komponentit saavat pääsyn määrittämiisi atomeihin, ja ne voivat sitten olla vuorovaikutuksessa niiden kanssa ja päivittää tilan käytäAtom koukku.

tuonti { Palveluntarjoaja } alkaen"jotai";

Kääri sovellus nyt index.js tai main.jsx kuten alla.

tuonti Reagoi alkaen'reagoi'
tuonti ReactDOM alkaen'react-dom/client'
tuonti Sovellus alkaen'./App.jsx'
tuonti'./index.css'
tuonti { Palveluntarjoaja } alkaen"jotai";
ReactDOM.createRoot(asiakirja.getElementById('juuri')).render(



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

Määritä Data Store

Kauppa toimii sovelluksen tilan keskustietovarastona. Se sisältää tyypillisesti atomien, valitsimien ja muiden niihin liittyvien toimintojen määrittelyn, joita tarvitaan Jotailla tapahtuvaan tilanhallintaan.

Tässä tapauksessa se hallitsee atomeja To-do-sovelluksen kohteiden luettelon hallintaan. Vuonna src hakemisto, luo TodoStore.jsx tiedosto ja lisää alla oleva koodi.

tuonti {atomi } alkaen"jotai";
viedäkonst TodosAtom = atomi([]);

Luomalla ja viemällä TodosAtom, voit olla mukavasti vuorovaikutuksessa ja päivittää tehtävien tilaa sovelluksen eri osissa.

Ota käyttöön To-Do-sovellustoiminto

Nyt kun olet määrittänyt Jotai React-sovelluksessa ja luonut atomin hallitsemaan sovelluksen tilaa, mene eteenpäin ja luo yksinkertainen tehtäväkomponentti, joka hoitaa tehtävän lisäys-, poisto- ja muokkaustoiminnot. kohteita.

Luoda uusi komponentit/Todo.jsx tiedosto tiedostoon src hakemistosta. Lisää tähän tiedostoon alla oleva koodi:

1. Tuo tietovarasto ja käytäAtom koukku.

   tuonti Reagoi, { useState } alkaen'reagoi';
   tuonti { TodosAtom } alkaen'../TodoStore';
   tuonti { useAtom } alkaen'jotai';

2. Luo toiminnallinen komponentti ja lisää JSX-elementit.

   konst Tehtävä = () => {
   
   palata (
   
   
    paikkamerkki="Uusi tehtävä"
    arvo={arvo}
    onChange={event => setValue (event.target.value)}
    />
   Lisää tehtävä</button>
   
   
    {todos.map(tehdä => (
   
   
    {todo.text}
    handleDelete (todo.id)}>Poista</button>
    </li>
    ))}
    </ul>
    </div>
    );
   };