Zkoumání State Managementu v Reactu pomocí Jotai: Praktický průvodce

Správa stavu v malých projektech je obecně jednoduchá pomocí háčků a rekvizit React. Jak se však aplikace rozrůstá a vyvstává potřeba sdílet a přistupovat k datům napříč různými komponentami, často to vede k vrtání podpěr. Bohužel, prop drilling může rychle zaplnit kódovou základnu a představovat problémy se škálovatelností.

Zatímco Redux nabízí skvělé řešení správy stavu, jeho API může být pro relativně malé projekty ohromující. Naproti tomu Jotai, minimální knihovna pro správu stavu, která ke správě využívá nezávislé jednotky států zvané atomy stavu, eliminuje problémy, jako je vrtání podpěr, a umožňuje přímočařejší a škálovatelnější správu stavu přístup.

Co je to Jotai a jak funguje?

Jotai je knihovna pro správu stavu, která nabízí jednoduché řešení správy stavu na rozdíl od složitějších alternativ, jako je Redux. K řízení stavu v aplikaci React využívá nezávislé jednotky stavu zvané atomy.

V ideálním případě různé komponenty v aplikaci přistupují k těmto atomům a aktualizují je pomocí háku poskytovaného společností Jotai nazvaného použít Atom. Zde je jednoduchý příklad, jak vytvořit atom Jotai:

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

Pro přístup a práci s atomy v Jotai můžete jednoduše použít použít Atom háček, který jako ostatní Reagovat háčky, umožňuje přístup a aktualizaci hodnoty stavu v rámci funkční komponenty.

Zde je příklad, který demonstruje jeho použití:

import { useAtom } z'jotai';
konst countAtom = atom(1);
funkceMyComponent() {
konst [count, setCount] = useAtom (countAtom);
konst přírůstek = () => setCount((prevCount) => prevCount + 1);
vrátit se (


Počet: {count}</p>
Přírůstek</button>
 </div>
 );
}

V tomto příkladu je použít Atom hák se používá pro přístup k countAtom atom a s ním spojená hodnota. The setCount Funkce se používá k aktualizaci hodnoty atomu a všechny související komponenty budou automaticky znovu vykresleny s aktualizovanou hodnotou.

Tím, že spouští pouze postižené komponenty, snižuje zbytečné opakované vykreslování v celé aplikaci. Tento cílený přístup k opětovnému vykreslování zvyšuje celkový výkon aplikace.

Se základy z cesty, pojďme vytvořit jednoduchou aplikaci To-do React, abychom lépe porozuměli možnostem správy stavu Jotai.

Řízení stavu v React pomocí Jotai

Začít, vytvořit aplikaci React. Případně můžete použijte Vite k nastavení projektu React. Jakmile složíte základní aplikaci React, pokračujte a nainstalujte si Jotai do své aplikace.

npm nainstalovat jotai

Dále, abyste mohli používat Jotai ve své aplikaci, musíte celou aplikaci zabalit do Poskytovatel komponent. Tato komponenta obsahuje úložiště, které slouží jako centrální rozbočovač pro poskytování hodnot atomů v celé aplikaci.

Navíc umožňuje deklarovat počáteční stav atomů. Zabalením aplikace do souboru Poskytovatel, všechny komponenty v aplikaci získají přístup k atomům, které jste definovali, a poté mohou interagovat a aktualizovat stav prostřednictvím použít Atom háček.

import { Poskytovatel } z"jotai";

Nyní zabalte aplikaci do index.js nebo main.jsx Jak je ukázáno níže.

import Reagovat z'reagovat'
import ReactDOM z'react-dom/client'
import Aplikace z'./App.jsx'
import'./index.css'
import { Poskytovatel } z"jotai";
ReactDOM.createRoot(dokument.getElementById('vykořenit')).poskytnout(



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

Nakonfigurujte úložiště dat

Úložiště funguje jako centrální úložiště pro stav aplikace. Obvykle obsahuje definici atomů, selektorů a jakýchkoli dalších souvisejících funkcí požadovaných pro řízení stavu pomocí Jotai.

V tomto případě spravuje atomy pro správu seznamu položek pro aplikaci To-do. V src adresář, vytvořit TodoStore.jsx soubor a přidejte kód níže.

import { atom } z"jotai";
vývozníkonst TodosAtom = atom([]);

Vytvořením a exportem TodosAtom, můžete pohodlně komunikovat a aktualizovat stav úkolů napříč různými součástmi aplikace.

Implementujte funkcionalitu aplikace To-Do

Nyní, když jste nakonfigurovali Jotai v aplikaci React a vytvořili atom pro správu stavu aplikace, jděte dopředu a vytvořte jednoduchou komponentu úkolů, která bude zpracovávat funkce přidávání, odstraňování a úpravy úkolů položky.

Vytvoř nový komponenty/Todo.jsx soubor v src adresář. Do tohoto souboru přidejte níže uvedený kód:

1. Importujte úložiště dat a použít Atom háček.

   import Reagovat, { useState } z'reagovat';
   import { TodosAtom } z'../TodoStore';
   import { useAtom } z'jotai';

2. Vytvořte funkční komponentu a přidejte prvky JSX.

   konst Todo = () => {
   
   vrátit se (
   
   
    zástupný symbol="Nový úkol"
    value={value}
    onChange={event => setValue (event.target.value)}
    />
   Přidat úkol</button>
   
   
    {todos.map(dělat => (
   
   
    {todo.text}
    handleDelete (todo.id)}>Smazat</button>
    </li>
    ))}
    </ul>
    </div>
    );
   };