Utforske statlig ledelse i React Using Jotai: En praktisk guide

Å administrere staten i småskala prosjekter er generelt enkelt ved å bruke React kroker og rekvisitter. Men etter hvert som applikasjonen vokser og behovet for å dele og få tilgang til data på tvers av forskjellige komponenter oppstår, fører det ofte til propellboring. Dessverre kan propellboring raskt rote kodebasen og introdusere skalerbarhetsutfordringer.

Mens Redux tilbyr en flott løsning for tilstandsadministrasjon, kan API-en være overveldende for relativt små prosjekter. I kontrast, Jotai, et minimalt statsadministrasjonsbibliotek som utnytter uavhengige enheter av stater kalt atomer for å administrere tilstand, eliminerer utfordringer som propellboring og muliggjør en mer enkel og skalerbar statlig styring nærme seg.

Hva er Jotai og hvordan fungerer det?

Jotai er et statlig styringsbibliotek som tilbyr en enkel tilstandsstyringsløsning i motsetning til mer komplekse alternativer som Redux. Den bruker uavhengige tilstandsenheter kalt atomer for å administrere tilstanden i React-applikasjonen.

Ideelt sett vil forskjellige komponenter i applikasjonen få tilgang til og oppdatere disse atomene ved hjelp av en krok levert av Jotai kalt bruk Atom. Her er et enkelt eksempel på hvordan du lager et Jotai-atom:

import { atom } fra'jotai';
konst countAtom = atom(1);

For å få tilgang til og arbeide med atomer i Jotai, kan du ganske enkelt bruke bruk Atom krok som, som andre Reager kroker, lar deg få tilgang til og oppdatere verdien av en tilstand i en funksjonell komponent.

Her er et eksempel for å demonstrere bruken:

import { useAtom } fra'jotai';
konst countAtom = atom(1);
funksjonMyComponent() {
konst [count, setCount] = useAtom (countAtom);
konst økning = () => setCount((prevCount) => prevCount + 1);
komme tilbake (


Antall: {count}</p>
Øke</button>
 </div>
 );
}

I dette eksemplet er bruk Atom krok brukes for å få tilgang til telleAtom atom og tilhørende verdi. De setCount funksjonen brukes til å oppdatere verdien av atomet, og eventuelle tilknyttede komponenter vil automatisk bli gjengitt med den oppdaterte verdien.

Ved bare å utløse de berørte komponentene, reduserer det unødvendig gjengivelse på tvers av applikasjonen. Denne målrettede tilnærmingen til gjengivelse forbedrer den generelle ytelsen til applikasjonen.

Med det grunnleggende ute av veien, la oss bygge en enkel To-do React-app for bedre å forstå Jotais evne til statlig administrasjon.

Statens ledelse reagerer ved å bruke Jotai

For å komme i gang, opprette en React-applikasjon. Alternativt kan du bruke Vite til å sette opp et React-prosjekt. Når du har stillaset en grunnleggende React-applikasjon, fortsett og installer Jotai i applikasjonen din.

npm installer jotai

Deretter, for å bruke Jotai i applikasjonen din, må du pakke inn hele appen med Forsørger komponent. Denne komponenten inneholder lageret som fungerer som det sentrale navet for å gi atomverdier gjennom hele applikasjonen.

I tillegg lar den deg erklære den opprinnelige tilstanden til atomer. Ved å pakke inn appen din med Forsørger, får alle komponentene i applikasjonen tilgang til atomene du har definert, og de kan deretter samhandle med og oppdatere tilstanden gjennom bruk Atom krok.

import { Forsørger } fra"jotai";

Pakk nå applikasjonen inn i index.js eller main.jsx som vist under.

import Reagere fra'reagere'
import ReactDOM fra'reager-dom/klient'
import App fra'./App.jsx'
import'./index.css'
import { Forsørger } fra"jotai";
ReactDOM.createRoot(dokument.getElementById('rot')).render(



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

Konfigurer et datalager

Butikken fungerer som et sentralt depot for applikasjonens tilstand. Den inneholder vanligvis definisjonen av atomer, velgere og andre relaterte funksjoner som kreves for statsadministrasjon ved bruk av Jotai.

I dette tilfellet administrerer den atomene for å administrere listen over elementer for To-do-applikasjonen. I src katalog, opprette TodoStore.jsx fil, og legg til koden nedenfor.

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

Ved å opprette og eksportere TodosAtom, kan du komfortabelt samhandle og oppdatere gjøremålstilstanden på tvers av forskjellige komponenter i applikasjonen.

Implementer To-Do-applikasjonsfunksjonaliteten

Nå som du har konfigurert Jotai i React-applikasjonen og opprettet et atom for å administrere applikasjonens tilstand, gå fremover, og lag en enkel gjøremålskomponent som håndterer funksjonene for å legge til, slette og redigere gjøremålet gjenstander.

Lage en ny komponenter/Todo.jsx fil i src katalog. I denne filen legger du til koden nedenfor:

1. Importer datalageret og bruk Atom krok.

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

2. Lag den funksjonelle komponenten og legg til JSX-elementene.

   konst Todo = () => {
   
   komme tilbake (
   
   
    plassholder="Ny gjøremål"
    verdi={verdi}
    onChange={event => setValue (event.target.value)}
    />
   Legg til gjøremål</button>
   
   
    {todos.map(å gjøre => (
   
   
    {todo.text}
    handleDelete (todo.id)}>Slett</button>
    </li>
    ))}
    </ul>
    </div>
    );
   };