Valstybės valdymo tyrimas naudojant Jotai: praktinis vadovas

Būsenos valdymas nedidelio masto projektuose paprastai yra nesudėtingas naudojant „React“ kabliukus ir rekvizitus. Tačiau kai programa plečiasi ir atsiranda poreikis dalytis ir pasiekti skirtingų komponentų duomenis, dažnai reikia gręžti atramas. Deja, atramos gręžimas gali greitai užgriozdinti kodų bazę ir sukelti mastelio problemų.

Nors „Redux“ siūlo puikų būsenos valdymo sprendimą, jo API gali būti didžiulė santykinai mažiems projektams. Priešingai, Jotai, minimali būsenos valdymo biblioteka, kuri valdymui naudoja nepriklausomus valstybių vienetus, vadinamus atomais būseną, pašalina tokius iššūkius kaip atramos gręžimas ir įgalina paprastesnį bei keičiamo dydžio būsenos valdymą metodas.

Kas yra Jotai ir kaip tai veikia?

Jotai yra valstybės valdymo biblioteka, kuri siūlo paprastą būsenos valdymo sprendimą, priešingai nei sudėtingesnės alternatyvos, tokios kaip Redux. Būsenai valdyti programoje „React“ naudojami nepriklausomi būsenos vienetai, vadinami atomais.

Idealiu atveju skirtingi programos komponentai pasiekia ir atnaujina šiuos atomus naudodami „Jotų“ pateiktą kabliuką, vadinamą „ naudotiAtom. Štai paprastas pavyzdys, kaip sukurti Jotai atomą:

importuoti {atomas} iš'jotai';
konst countAtom = atomas (1);

Norėdami pasiekti ir dirbti su atomais Jotai, galite tiesiog naudoti naudotiAtom kabliukas, kuris, kaip ir kiti Reaguoti kabliukai, leidžia pasiekti ir atnaujinti funkcinio komponento būsenos reikšmę.

Štai pavyzdys, rodantis jo naudojimą:

importuoti { useAtom } iš'jotai';
konst countAtom = atomas (1);
funkcijaMano komponentas() {
konst [count, setCount] = useAtom (countAtom);
konst prieaugis = () => setCount((ankstesnis skaičius) => ankstesnis skaičius + 1);
grąžinti (


Skaičiavimas: {count}</p>
Prieaugis </button>
 </div>
 );
}

Šiame pavyzdyje naudotiAtom kabliukas naudojamas norint pasiekti countAtom atomas ir su juo susijusi vertė. The setCount funkcija naudojama atomo vertei atnaujinti, o visi susiję komponentai bus automatiškai iš naujo pateikti su atnaujinta verte.

Suaktyvinus tik paveiktus komponentus, tai sumažina nereikalingų pakartotinių atvaizdų skaičių programoje. Šis tikslingas požiūris į pakartotinį pateikimą pagerina bendrą programos našumą.

Nesusipratę su pagrindiniais dalykais, sukurkime paprastą To-do React programėlę, kad geriau suprastume Jotų valstybės valdymo galimybes.

Valstybės valdymas reaguoja naudojant Jotai

Pradėti, sukurti „React“ programą. Arba galite naudokite Vite, kad sukurtumėte React projektą. Sukūrę pagrindinę „React“ programą, įdiekite „Jotai“ savo programoje.

npm įdiegti jotai

Tada, norėdami naudoti „Jotai“ savo programoje, turite apvynioti visą programą su Teikėjas komponentas. Šiame komponente yra parduotuvė, kuri veikia kaip centrinis centras, teikiantis atomų vertes visoje programoje.

Be to, tai leidžia deklaruoti pradinę atomų būseną. Apvyniodami programą su Teikėjas, visi programos komponentai gauna prieigą prie jūsų apibrėžtų atomų, tada jie gali sąveikauti ir atnaujinti būseną naudodami naudotiAtom kabliukas.

importuoti { Teikėjas } iš"jotai";

Dabar apvyniokite programą į index.js arba pagrindinis.jsx kaip parodyta žemiau.

importuoti Reaguoti iš'reaguoti'
importuoti ReactDOM iš'react-dom/client'
importuoti Programėlė iš„./App.jsx“
importuoti'./index.css'
importuoti { Teikėjas } iš"jotai";
ReactDOM.createRoot(dokumentas.getElementById("šaknis")).pateikti(



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

Sukonfigūruokite duomenų saugyklą

Parduotuvė veikia kaip centrinė programos būsenos saugykla. Jame paprastai pateikiami atomų, selektorių ir kitų susijusių funkcijų, reikalingų valstybės valdymui naudojant Jotai, apibrėžimai.

Šiuo atveju jis tvarko programos To-do elementų sąrašo tvarkymo atomus. Viduje src katalogas, sukurti TodoStore.jsx failą ir pridėkite toliau esantį kodą.

importuoti {atomas} iš"jotai";
eksportuotikonst TodosAtom = atomas([]);

Kurdami ir eksportuodami TodosAtom, galite patogiai bendrauti ir atnaujinti užduočių būseną skirtinguose programos komponentuose.

Įdiekite programos „To-Do“ funkciją

Dabar, kai programoje React sukonfigūravote Jotai ir sukūrėte atomą programos būsenai valdyti, eikite į priekį ir sukurkite paprastą užduočių komponentą, kuris tvarkys užduoties pridėjimo, ištrynimo ir redagavimo funkcijas. daiktų.

Sukurti naują komponentai/Todo.jsx failą src katalogas. Šiame faile pridėkite žemiau esantį kodą:

1. Importuokite duomenų saugyklą ir naudotiAtom kabliukas.

   importuoti Reaguoti, { useState } iš'reaguoti';
   importuoti { TodosAtom } iš„../TodoStore“;
   importuoti { useAtom } iš'jotai';

2. Sukurkite funkcinį komponentą ir pridėkite JSX elementus.

   konst Todo = () => {
   
   grąžinti (
   
   
    vietos rezervuaras="Naujas darbas"
    value={value}
    onChange={event => setValue (event.target.value)}
    />
   Pridėti užduotį</button>
   
   
    {todos.map(daryti => (
   
   
    {todo.text}
    handleDelete (todo.id)}>Ištrinti</button>
    </li>
    ))}
    </ul>
    </div>
    );
   };