Riigijuhtimise uurimine reageerimisel Jotai abil: praktiline juhend

Oleku haldamine väikesemahulistes projektides on Reacti konksude ja rekvisiitide abil üldiselt lihtne. Kuna aga rakendus kasvab ning tekib vajadus jagada ja erinevate komponentide vahel andmeid juurde pääseda, viib see sageli tugipuurimiseni. Kahjuks võib rekvisiitide puurimine koodibaasi kiiresti segamini ajada ja tuua kaasa mastaapsuse probleeme.

Kuigi Redux pakub suurepärast olekuhalduslahendust, võib selle API olla suhteliselt väikeste projektide jaoks ülekaalukas. Seevastu Jotai, minimaalne olekuhalduse raamatukogu, mis kasutab haldamiseks iseseisvaid olekuühikuid, mida nimetatakse aatomiteks olekut, kõrvaldab sellised väljakutsed nagu rekvisiitide puurimine ning võimaldab lihtsamat ja mastaapsemat olekuhaldust lähenemine.

Mis on Jotai ja kuidas see toimib?

Jotai on olekuhalduse raamatukogu, mis pakub lihtsat olekuhalduslahendust erinevalt keerukamatest alternatiividest nagu Redux. See kasutab rakenduses React oleku haldamiseks sõltumatuid olekuühikuid, mida nimetatakse aatomiteks.

Ideaalis pääsevad rakenduse erinevad komponendid neile aatomitele juurde ja värskendavad neid, kasutades Jotai pakutavat konksu nimega the useAtom. Siin on lihtne näide Jotai aatomi loomisest:

importida {aatom} alates'jotai';
konst countAtom = aatom(1);

Jotai aatomitele juurdepääsuks ja nendega töötamiseks võite lihtsalt kasutada useAtom konks mis nagu teisedki Reageeri konksud, võimaldab funktsionaalse komponendi oleku väärtust juurde pääseda ja seda värskendada.

Siin on näide selle kasutamise demonstreerimiseks:

importida { useAtom } alates'jotai';
konst countAtom = aatom(1);
funktsiooniMinu komponent() {
konst [count, setCount] = useAtom (countAtom);
konst juurdekasv = () => setCount((prevCount) => prevCount + 1);
tagasi (


Loendus: {count}</p>
Kasv</button>
 </div>
 );
}

Selles näites on useAtom juurdepääsuks kasutatakse konksu countAtom aatom ja sellega seotud väärtus. The setCount funktsiooni kasutatakse aatomi väärtuse värskendamiseks ja kõik seotud komponendid renderdatakse automaatselt uuesti koos värskendatud väärtusega.

Käivitades ainult mõjutatud komponente, vähendab see tarbetuid kordusrenderdusi kogu rakenduses. See sihipärane lähenemine uuesti renderdamisele suurendab rakenduse üldist jõudlust.

Kui põhiteadmised on käes, loome lihtsa To-do Reacti rakenduse, et mõista paremini Jotai olekuhaldusvõimalusi.

Riigi juhtimine reageerimisel Jotai abil

Alustamiseks looge rakendus React. Teise võimalusena saate kasutage Vitet Reacti projekti seadistamiseks. Kui olete Reacti põhirakenduse tellinud, installige oma rakendusse Jotai.

npm install jotai

Järgmiseks peate oma rakenduses Jotai kasutamiseks pakkima kogu rakenduse sellesse Pakkuja komponent. See komponent sisaldab poodi, mis toimib keskse jaoturina aatomiväärtuste esitamiseks kogu rakenduses.

Lisaks võimaldab see deklareerida aatomite algoleku. Pakkides oma rakenduse alla Pakkuja, saavad kõik rakenduse komponendid juurdepääsu teie määratletud aatomitele ja saavad seejärel nendega suhelda ja olekut värskendada useAtom konks.

importida { Pakkuja } alates"jotai";

Nüüd mähkige rakendus sisse index.js või main.jsx nagu allpool näidatud.

importida Reageerige alates'reageeri'
importida ReactDOM alates'reageerimis-/klient'
importida Rakendus alates'./App.jsx'
importida'./index.css'
importida { Pakkuja } alates"jotai";
ReactDOM.createRoot(dokument.getElementById("juur")).renderda(



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

Andmesalve konfigureerimine

Pood toimib rakenduse oleku keskse hoidlana. Tavaliselt sisaldab see aatomite, selektorite ja muude seotud funktsioonide määratlusi, mis on vajalikud oleku haldamiseks Jotai abil.

Sel juhul haldab see rakenduse Ülesanded üksuste loendi haldamise aatomeid. Aastal src kataloog, loo TodoStore.jsx faili ja lisage allolev kood.

importida {aatom} alates"jotai";
eksportidakonst TodosAtom = aatom([]);

Luues ja eksportides TodosAtom, saate rakenduse eri komponentides mugavalt suhelda ja ülesannete olekut värskendada.

Rakendage rakenduste ülesannete funktsioon

Nüüd, kui olete rakenduses React konfigureerinud Jotai ja loonud rakenduse oleku haldamiseks aatomi, minge ja looge lihtne ülesannete komponent, mis tegeleb ülesande lisamise, kustutamise ja muutmise funktsioonidega esemed.

Loo uus komponendid/Todo.jsx faili src kataloog. Lisage sellesse faili järgmine kood:

1. Importige andmesalve ja useAtom konks.

   importida Reageerige, { useState } alates'reageeri';
   importida { TodosAtom } alates'../TodoStore';
   importida { useAtom } alates'jotai';

2. Looge funktsionaalne komponent ja lisage JSX-i elemendid.

   konst Todo = () => {
   
   tagasi (
   
   
    kohatäide="Uus ülesanne"
    väärtus={väärtus}
    onChange={event => setValue (event.target.value)}
    />
   Lisa ülesanne</button>
   
   
    {todos.map(tegema => (
   
   
    {todo.text}
    handDelete (todo.id)}>Kustuta</button>
    </li>
    ))}
    </ul>
    </div>
    );
   };