State Management in React verkennen met behulp van Jotai: een praktische gids

Het beheren van de staat in kleinschalige projecten is over het algemeen eenvoudig met behulp van React-haken en rekwisieten. Naarmate de toepassing echter groeit en de behoefte ontstaat om gegevens over verschillende componenten te delen en te openen, leidt dit vaak tot propboren. Helaas kan propboren de codebase snel onoverzichtelijk maken en schaalbaarheidsproblemen introduceren.

Hoewel Redux een geweldige oplossing voor statusbeheer biedt, kan de API overweldigend zijn voor relatief kleine projecten. Jotai daarentegen, een minimale staatsbeheerbibliotheek die gebruikmaakt van onafhankelijke eenheden van staten, atomen genaamd, om te beheren state, elimineert uitdagingen zoals propboren en maakt een meer rechttoe rechtaan en schaalbaar state management mogelijk benadering.

Wat is Jotai en hoe werkt het?

Jotai is een staatsbeheerbibliotheek die een eenvoudige staatsbeheeroplossing biedt in tegenstelling tot meer complexe alternatieven zoals Redux. Het maakt gebruik van onafhankelijke staatseenheden, atomen genaamd, om de staat in de React-toepassing te beheren.

Idealiter hebben verschillende componenten in de applicatie toegang tot deze atomen en werken ze deze bij met behulp van een haak die door Jotai wordt geleverd, genaamd de gebruik Atom. Hier is een eenvoudig voorbeeld van het maken van een Jotai-atoom:

importeren { atoom } van'jotai';
const aantalAtoom = atoom(1);

Om toegang te krijgen tot en te werken met atomen in Jotai, kunt u eenvoudig gebruiken gebruik Atom haak die, net als andere Reageer haken, stelt u in staat om toegang te krijgen tot de waarde van een status binnen een functionele component en deze bij te werken.

Hier is een voorbeeld om het gebruik ervan te demonstreren:

importeren { gebruikAtom } van'jotai';
const aantalAtoom = atoom(1);
functieMijnComponent() {
const [count, setCount] = useAtom (countAtom);
const verhoging = () => setCount((vorigeCount) => vorigeTel + 1);
opbrengst (


Tellen: {count}</p>
Verhogen</button>
 </div>
 );
}

In dit voorbeeld is de gebruik Atom haak wordt gebruikt om toegang te krijgen tot de telAtoom atoom en de bijbehorende waarde. De setCount functie wordt gebruikt om de waarde van het atoom bij te werken en alle bijbehorende componenten worden automatisch opnieuw weergegeven met de bijgewerkte waarde.

Door alleen de getroffen componenten te activeren, worden onnodige herweergaven in de hele applicatie voorkomen. Deze gerichte benadering van opnieuw renderen verbetert de algehele prestaties van de toepassing.

Laten we, met de basis uit de weg, een eenvoudige To-do React-app bouwen om Jotai's statusbeheermogelijkheden beter te begrijpen.

Staatsbeheer reageert met Jotai

Starten, maak een React-applicatie. Als alternatief kan dat gebruik Vite om een ​​React-project op te zetten. Zodra je een standaard React-applicatie hebt opgezet, ga je gang en installeer je Jotai in je applicatie.

npm installeer jotai

Om vervolgens Jotai in uw applicatie te gebruiken, moet u uw hele app omwikkelen met de Aanbieder bestanddeel. Deze component bevat de winkel die dient als de centrale hub voor het leveren van atoomwaarden in de hele applicatie.

Bovendien kunt u hiermee de begintoestand van atomen aangeven. Door uw app te verpakken met de Aanbieder, krijgen alle componenten in de toepassing toegang tot de atomen die u hebt gedefinieerd, en kunnen ze vervolgens communiceren met de status en deze bijwerken via de gebruik Atom haak.

importeren { Aanbieder } van"jotai";

Wikkel nu de applicatie in de index.js of main.jsx zoals hieronder weergegeven.

importeren Reageer van'Reageer'
importeren ReactDOM van'react-dom/klant'
importeren app van'./App.jsx'
importeren'./index.css'
importeren { Aanbieder } van"jotai";
ReactDOM.createRoot(document.getElementById('wortel')).veroorzaken(



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

Configureer een gegevensopslag

De winkel fungeert als een centrale opslagplaats voor de status van de applicatie. Het bevat meestal de definitie van atomen, selectors en alle andere gerelateerde functies die nodig zijn voor statusbeheer met Jotai.

In dit geval beheert het de atomen voor het beheer van de lijst met items voor de To-do-toepassing. In de src map, aanmaken TodoStore.jsx bestand en voeg de onderstaande code toe.

importeren { atoom } van"jotai";
exporterenconst TodosAtoom = atoom([]);

Door het maken en exporteren van de TodosAtom, kunt u gemakkelijk communiceren en de takenstatus bijwerken voor verschillende componenten in de toepassing.

Implementeer de To-Do-applicatiefunctionaliteit

Nu je Jotai hebt geconfigureerd in de React-applicatie en een atoom hebt gemaakt om de status van de applicatie te beheren, ga vooruit, en maak een eenvoudige to-do-component die de functies voor toevoegen, verwijderen en bewerken voor de to-do afhandelt artikelen.

Maak een nieuwe aan componenten/Todo.jsx bestand in de src map. Voeg in dit bestand de onderstaande code toe:

1. Importeer het gegevensarchief en het gebruik Atom haak.

   importeren Reageer, { useState } van'Reageer';
   importeren { TodosAtom } van'../TodoStore';
   importeren { gebruikAtom } van'jotai';

2. Maak de functionele component en voeg de JSX-elementen toe.

   const Todo = () => {
   
   opbrengst (
   
   
    tijdelijke aanduiding="Nieuwe taak"
    waarde={waarde}
    onChange={event => setValue (event.target.value)}
    />
   Todo< toevoegen/button>
   
   
    {todos.map(Te doen => (
   
   
    {todo.text}
    handleDelete (todo.id)}>Verwijderen</button>
    </li>
    ))}
    </ul>
    </div>
    );
   };