Exploring State Management in React Using Jotai: A Practical Guide

Att hantera tillstånd i småskaliga projekt är i allmänhet enkelt med hjälp av React-krokar och rekvisita. Men när applikationen växer och behovet av att dela och komma åt data över olika komponenter uppstår, leder det ofta till propellborrning. Tyvärr kan propellborrning snabbt belamra kodbasen och introducera skalbarhetsutmaningar.

Även om Redux erbjuder en fantastisk lösning för tillståndshantering, kan dess API vara överväldigande för relativt små projekt. Däremot Jotai, ett minimalt statsförvaltningsbibliotek som utnyttjar oberoende enheter av stater som kallas atomer för att hantera tillstånd, eliminerar utmaningar som propellborrning och möjliggör en mer okomplicerad och skalbar tillståndshantering närma sig.

Vad är Jotai och hur fungerar det?

Jotai är ett tillståndshanteringsbibliotek som erbjuder en enkel tillståndshanteringslösning i motsats till mer komplexa alternativ som Redux. Den använder oberoende tillståndsenheter som kallas atomer för att hantera tillstånd i React-applikationen.

Helst kan olika komponenter i applikationen komma åt och uppdatera dessa atomer med hjälp av en krok från Jotai som kallas använd Atom. Här är ett enkelt exempel på hur man skapar en Jotai-atom:

importera { atom } från'jotai';
konst countAtom = atom(1);

För att komma åt och arbeta med atomer i Jotai kan du helt enkelt använda använd Atom krok som, liksom andra Reagera krokar, gör att du kan komma åt och uppdatera värdet för ett tillstånd inom en funktionell komponent.

Här är ett exempel för att demonstrera dess användning:

importera { useAtom } från'jotai';
konst countAtom = atom(1);
fungeraMyComponent() {
konst [count, setCount] = useAtom (countAtom);
konst ökning = () => setCount((prevCount) => prevCount + 1);
lämna tillbaka (


Räkna: {count}</p>
Öka</button>
 </div>
 );
}

I det här exemplet är använd Atom krok används för att komma åt räknaAtom atom och dess tillhörande värde. De setCount funktionen används för att uppdatera värdet på atomen och alla associerade komponenter kommer automatiskt att återrenderas med det uppdaterade värdet.

Genom att bara trigga de berörda komponenterna minskar det onödiga omrenderingar i hela applikationen. Detta riktade tillvägagångssätt för omrendering förbättrar applikationens övergripande prestanda.

Med grunderna ur vägen, låt oss bygga en enkel To-do React-app för att bättre förstå Jotais tillståndshanteringsmöjligheter.

Statens ledning reagerar med hjälp av Jotai

För att starta, skapa en React-applikation. Alternativt kan du använda Vite för att skapa ett React-projekt. När du bygger en grundläggande React-applikation, fortsätt och installera Jotai i din applikation.

npm installera jotai

Därefter, för att använda Jotai i din applikation, måste du slå in hela appen med Leverantör komponent. Denna komponent innehåller lagret som fungerar som det centrala navet för att tillhandahålla atomvärden genom hela applikationen.

Dessutom låter det dig deklarera atomernas initiala tillstånd. Genom att slå in din app med Leverantör, får alla komponenter i applikationen tillgång till de atomer du har definierat, och de kan sedan interagera med och uppdatera tillståndet genom använd Atom krok.

importera { Leverantör } från"jotai";

Slå nu in applikationen i index.js eller main.jsx enligt nedanstående.

importera Reagera från'reagera'
importera ReactDOM från'reagera-dom/klient'
importera App från'./App.jsx'
importera'./index.css'
importera { Leverantör } från"jotai";
ReactDOM.createRoot(dokumentera.getElementById('rot')).framställa(



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

Konfigurera ett datalager

Butiken fungerar som ett centralt arkiv för applikationens tillstånd. Den innehåller vanligtvis definitionen av atomer, väljare och alla andra relaterade funktioner som krävs för statlig förvaltning med Jotai.

I det här fallet hanterar den atomerna för att hantera listan med objekt för Att göra-applikationen. I den src katalog, skapa TodoStore.jsx fil och lägg till koden nedan.

importera { atom } från"jotai";
exporterakonst TodosAtom = atom([]);

Genom att skapa och exportera TodosAtom, kan du bekvämt interagera och uppdatera uppgifternas status över olika komponenter i applikationen.

Implementera att göra-applikationens funktionalitet

Nu när du har konfigurerat Jotai i React-applikationen och skapat en atom för att hantera applikationens tillstånd, gå framåt och skapa en enkel att göra-komponent som kommer att hantera funktionerna för att lägga till, ta bort och redigera föremål.

Skapa en ny komponenter/Todo.jsx fil i src katalog. Lägg till koden nedan i den här filen:

1. Importera datalagret och använd Atom krok.

   importera Reagera, { useState } från'reagera';
   importera { TodosAtom } från'../TodoStore';
   importera { useAtom } från'jotai';

2. Skapa den funktionella komponenten och lägg till JSX-elementen.

   konst Att göra = () => {
   
   lämna tillbaka (
   
   
    platshållare="Ny uppgift"
    värde={värde}
    onChange={event => setValue (event.target.value)}
    />
   Lägg till Todo</button>
   
   
    {todos.map(att göra => (
   
   
    {todo.text}
    handleDelete (todo.id)}>Ta bort</button>
    </li>
    ))}
    </ul>
    </div>
    );
   };