Udforskning af statsledelse i React Using Jotai: En praktisk vejledning

At styre staten i små projekter er generelt ligetil ved at bruge React kroge og rekvisitter. Men efterhånden som applikationen vokser og behovet for at dele og få adgang til data på tværs af forskellige komponenter opstår, fører det ofte til propboring. Desværre kan propboring hurtigt rod i kodebasen og introducere skalerbarhedsudfordringer.

Mens Redux tilbyder en fantastisk løsning til tilstandsstyring, kan dens API være overvældende for relativt små projekter. I modsætning hertil Jotai, et minimalt statsforvaltningsbibliotek, der udnytter uafhængige enheder af stater kaldet atomer til at styre tilstand, eliminerer udfordringer som propboring og muliggør en mere ligetil og skalerbar statsstyring nærme sig.

Hvad er Jotai, og hvordan virker det?

Jotai er et statsstyringsbibliotek, der tilbyder en simpel tilstandsstyringsløsning i modsætning til mere komplekse alternativer som Redux. Den anvender uafhængige statsenheder kaldet atomer til at styre tilstand i React-applikationen.

Ideelt set kan forskellige komponenter i applikationen få adgang til og opdatere disse atomer ved hjælp af en krog leveret af Jotai kaldet brug Atom. Her er et simpelt eksempel på, hvordan man opretter et Jotai-atom:

importere { atom } fra'jotai';
konst tælAtom = atom(1);

For at få adgang til og arbejde med atomer i Jotai kan du blot bruge brug Atom krog som ligesom andre Reager kroge, giver dig adgang til og opdatere værdien af ​​en tilstand i en funktionel komponent.

Her er et eksempel for at demonstrere dets brug:

importere { useAtom } fra'jotai';
konst tælAtom = atom(1);
fungereMyComponent() {
konst [count, setCount] = useAtom (countAtom);
konst stigning = () => sætTal((prevCount) => prevCount + 1);
Vend tilbage (


Antal: {count}</p>
Inkrement</button>
 </div>
 );
}

I dette eksempel er brug Atom krog bruges til at få adgang til tælleAtom atom og dets tilhørende værdi. Det setCount funktion bruges til at opdatere værdien af ​​atomet, og eventuelle tilknyttede komponenter vil automatisk blive gengivet med den opdaterede værdi.

Ved kun at udløse de berørte komponenter, reducerer det unødvendige gengivelser på tværs af applikationen. Denne målrettede tilgang til gengivelse forbedrer applikationens overordnede ydeevne.

Med det grundlæggende af vejen, lad os bygge en simpel To-do React-app for bedre at forstå Jotais statsstyringskapaciteter.

Statsledelse reagerer ved hjælp af Jotai

For at komme i gang, oprette en React-applikation. Alternativt kan du bruge Vite til at oprette et React-projekt. Når du har stilladset en grundlæggende React-applikation, skal du gå videre og installere Jotai i din applikation.

npm installer jotai

Dernæst, for at bruge Jotai i din applikation, skal du pakke hele din app med Udbyder komponent. Denne komponent indeholder lageret, der fungerer som det centrale knudepunkt for at levere atomværdier gennem hele applikationen.

Derudover giver det dig mulighed for at erklære atomernes begyndelsestilstand. Ved at pakke din app med Udbyder, får alle komponenter i applikationen adgang til de atomer, du har defineret, og de kan derefter interagere med og opdatere tilstanden gennem brug Atom krog.

importere { Udbyder } fra"jotai";

Pak nu applikationen ind i index.js eller main.jsx som vist nedenfor.

importere Reagere fra'reagere'
importere ReactDOM fra'reager-dom/klient'
importere App fra'./App.jsx'
importere'./index.css'
importere { Udbyder } fra"jotai";
ReactDOM.createRoot(dokument.getElementById('rod')).render(



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

Konfigurer et datalager

Butikken fungerer som et centralt lager for applikationens tilstand. Det indeholder typisk definitionen af ​​atomer, selektorer og andre relaterede funktioner, der kræves til statsstyring ved hjælp af Jotai.

I dette tilfælde administrerer den atomerne til styring af listen over emner til To-do-applikationen. I den src mappe, oprette TodoStore.jsx fil, og tilføj koden nedenfor.

importere { atom } fra"jotai";
eksportkonst TodosAtom = atom([]);

Ved at oprette og eksportere TodosAtom, kan du nemt interagere og opdatere gøremålstilstanden på tværs af forskellige komponenter i applikationen.

Implementer To-Do-applikationsfunktionaliteten

Nu hvor du har konfigureret Jotai i React-applikationen og oprettet et atom til at styre applikationens tilstand, skal du gå fremad, og opret en simpel opgave-komponent, der håndterer funktionerne til at tilføje, slette og redigere opgaven genstande.

Opret en ny komponenter/Todo.jsx fil i src vejviser. Tilføj koden nedenfor i denne fil:

1. Importer datalageret og brug Atom krog.

   importere Reager, { useState } fra'reagere';
   importere { TodosAtom } fra'../TodoStore';
   importere { useAtom } fra'jotai';

2. Opret den funktionelle komponent og tilføj JSX-elementerne.

   konst Todo = () => {
   
   Vend tilbage (
   
   
    pladsholder="Ny opgave"
    værdi={værdi}
    onChange={event => setValue (event.target.value)}
    />
   Tilføj Todo</button>
   
   
    {todos.map(at gøre => (
   
   
    {todo.text}
    handleDelete (todo.id)}>Slet</button>
    </li>
    ))}
    </ul>
    </div>
    );
   };