Valsts pārvaldības izpēte Reakcijā, izmantojot Jotai: praktiska rokasgrāmata

Stāvokļa pārvaldība maza mēroga projektos parasti ir vienkārša, izmantojot React āķus un rekvizītus. Tomēr, lietojumprogrammai augot un rodas nepieciešamība koplietot datus un piekļūt tiem dažādos komponentos, tas bieži noved pie atbalsta urbšanas. Diemžēl balstu urbšana var ātri pārblīvēt kodu bāzi un radīt mērogojamības problēmas.

Lai gan Redux piedāvā lielisku valsts pārvaldības risinājumu, tā API var būt nepārvarama salīdzinoši maziem projektiem. Turpretim Jotai, minimāla stāvokļa pārvaldības bibliotēka, kas pārvaldīšanai izmanto neatkarīgas štatu vienības, ko sauc par atomiem stāvokli, novērš problēmas, piemēram, balstu urbšanu, un nodrošina vienkāršāku un mērogojamāku stāvokļa pārvaldību pieeja.

Kas ir Jotai un kā tas darbojas?

Jotai ir valsts pārvaldības bibliotēka, kas piedāvā vienkāršu valsts pārvaldības risinājumu atšķirībā no sarežģītākām alternatīvām, piemēram, Redux. Tas izmanto neatkarīgas stāvokļa vienības, ko sauc par atomiem, lai pārvaldītu stāvokli lietojumprogrammā React.

Ideālā gadījumā dažādi komponenti lietojumprogrammā, piekļūst un atjaunina šos atomus, izmantojot Jotai nodrošināto āķi, ko sauc par izmantotAtom. Šeit ir vienkāršs piemērs, kā izveidot Jotai atomu:

imports {atoms} no'jotai';
konst countAtom = atoms(1);

Lai piekļūtu un strādātu ar atomiem Jotai, varat vienkārši izmantot izmantotAtom āķis, kurš, tāpat kā citi Reaģēt āķi, ļauj piekļūt funkcionālā komponenta stāvokļa vērtībai un atjaunināt to.

Šeit ir piemērs, lai parādītu tā lietošanu:

imports { useAtom } no'jotai';
konst countAtom = atoms(1);
funkcijuMyComponent() {
konst [count, setCount] = useAtom (countAtom);
konst pieaugums = () => setCount((prevCount) => prevCount + 1);
atgriezties (


Skaits: {count}</p>
Pieaugums</button>
 </div>
 );
}

Šajā piemērā izmantotAtom āķis tiek izmantots, lai piekļūtu countAtom atoms un ar to saistītā vērtība. The setCount funkcija tiek izmantota, lai atjauninātu atoma vērtību, un visi saistītie komponenti tiks automātiski atveidoti ar atjaunināto vērtību.

Aktivizējot tikai ietekmētos komponentus, tas samazina nevajadzīgu atkārtotu renderēšanu visā lietojumprogrammā. Šī mērķtiecīgā pieeja atkārtotai renderēšanai uzlabo lietojumprogrammas vispārējo veiktspēju.

Neizmantojot pamatus, izveidosim vienkāršu To-do React lietotni, lai labāk izprastu Jotai valsts pārvaldības iespējas.

Valsts vadība reaģēt, izmantojot Jotai

Lai sāktu, izveidot React lietojumprogrammu. Alternatīvi, jūs varat izmantojiet Vite, lai izveidotu React projektu. Kad esat izveidojis pamata React lietojumprogrammu, turpiniet un instalējiet savā lietojumprogrammā Jotai.

npm instalēt jotai

Tālāk, lai savā lietojumprogrammā izmantotu Jotai, visa lietotne ir jāietver ar Pakalpojumu sniedzējs komponents. Šajā komponentā ir veikals, kas kalpo kā centrālais centrs atomu vērtību nodrošināšanai visā lietojumprogrammā.

Turklāt tas ļauj deklarēt atomu sākotnējo stāvokli. Iesaiņojot savu lietotni ar Pakalpojumu sniedzējs, visi lietojumprogrammas komponenti iegūst piekļuvi jūsu definētajiem atomiem, un pēc tam tie var mijiedarboties ar un atjaunināt stāvokli, izmantojot izmantotAtom āķis.

imports { nodrošinātājs } no"jotai";

Tagad iesaiņojiet lietojumprogrammu index.js vai galvenais.jsx kā parādīts zemāk.

imports Reaģēt no'reaģēt'
imports ReactDOM no'react-dom/client'
imports App no'./App.jsx'
imports'./index.css'
imports { nodrošinātājs } no"jotai";
ReactDOM.createRoot(dokumentu.getElementById('sakne')).render(



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

Konfigurējiet datu veikalu

Veikals darbojas kā centrālā lietojumprogrammas stāvokļa repozitorijs. Tas parasti satur atomu, selektoru un citu saistīto funkciju definīcijas, kas nepieciešamas stāvokļa pārvaldībai, izmantojot Jotai.

Šajā gadījumā tas pārvalda atomus, lai pārvaldītu lietojumprogrammas To-do vienumu sarakstu. Iekš src direktoriju, izveidot TodoStore.jsx failu un pievienojiet tālāk norādīto kodu.

imports {atoms} no"jotai";
eksportētkonst TodosAtom = atoms([]);

Izveidojot un eksportējot TodosAtom, varat ērti mijiedarboties un atjaunināt uzdevumu stāvokli dažādos lietojumprogrammas komponentos.

Ieviesiet lietojumprogrammas To-Do funkcionalitāti

Tagad, kad esat konfigurējis Jotai lietojumprogrammā React un izveidojis atomu, lai pārvaldītu lietojumprogrammas stāvokli, dodieties uz priekšu un izveidojiet vienkāršu uzdevumu komponentu, kas apstrādās uzdevuma pievienošanas, dzēšanas un rediģēšanas funkcijas. preces.

Izveidojiet jaunu komponenti/Todo.jsx failu mapē src direktoriju. Šajā failā pievienojiet tālāk norādīto kodu:

1. Importējiet datu krātuvi un izmantotAtom āķis.

   imports Reaģēt, { useState } no'reaģēt';
   imports { TodosAtom } no'../TodoStore';
   imports { useAtom } no'jotai';

2. Izveidojiet funkcionālo komponentu un pievienojiet JSX elementus.

   konst Todo = () => {
   
   atgriezties (
   
   
    vietturis="Jauns uzdevums"
    vērtība={vērtība}
    onChange={event => setValue (event.target.value)}
    />
   Pievienot uzdevumu</button>
   
   
    {todos.map(darīt => (
   
   
    {todo.text}
    handDelete (todo.id)}>Dzēst</button>
    </li>
    ))}
    </ul>
    </div>
    );
   };