Az államkezelés feltárása a React segítségével Jotai segítségével: Gyakorlati útmutató

Az állapot kezelése kisméretű projektekben általában egyszerű a React horgok és kellékek segítségével. Azonban ahogy az alkalmazás növekszik, és szükség van az adatok megosztására és a különböző összetevők közötti hozzáférésre, ez gyakran támasztékfúráshoz vezet. Sajnos a kellékfúrás gyorsan megzavarhatja a kódbázist, és skálázhatósági kihívásokat vethet fel.

Míg a Redux nagyszerű állapotkezelési megoldást kínál, API-ja túlterhelt lehet viszonylag kis projektek esetén. Ezzel szemben a Jotai, egy minimális állapotkezelési könyvtár, amely az állapotok független egységeit, úgynevezett atomokat használja fel a kezeléshez állapotát, kiküszöböli az olyan kihívásokat, mint a prop fúrás, és egyszerűbb és skálázhatóbb állapotkezelést tesz lehetővé megközelítés.

Mi az a Jotai és hogyan működik?

Jotai egy állapotkezelési könyvtár, amely egyszerű állapotkezelési megoldást kínál, szemben az olyan összetettebb alternatívákkal, mint a Redux. Független állapotegységeket, úgynevezett atomokat használ a React alkalmazás állapotának kezelésére.

Ideális esetben az alkalmazás különböző komponensei hozzáférnek és frissítik ezeket az atomokat a Jotai által biztosított horog segítségével useAtom. Íme egy egyszerű példa a Jotai atom létrehozására:

import {atom} tól től'jotai';
const countAtom = atom(1);

Az atomokhoz való hozzáféréshez és azokkal való munkához a Jotaiban egyszerűen használhatja useAtom horog, amely, mint a többi Reagálás horgok, lehetővé teszi egy funkcionális komponensen belüli állapot értékének elérését és frissítését.

Íme egy példa a használat bemutatására:

import { useAtom } tól től'jotai';
const countAtom = atom(1);
funkcióMyComponent() {
const [count, setCount] = useAtom (countAtom);
const növekmény = () => setCount((prevCount) => prevCount + 1);
Visszatérés (


Szám: {count}</p>
Növekedés</button>
 </div>
 );
}

Ebben a példában a useAtom kampót használnak a hozzáféréshez countAtom atom és a hozzá tartozó érték. A setCount A függvény az atom értékének frissítésére szolgál, és a kapcsolódó összetevők automatikusan újra megjelennek a frissített értékkel.

Azáltal, hogy csak az érintett összetevőket aktiválja, csökkenti a szükségtelen újramegjelenítések számát az alkalmazásban. Az újramegjelenítésnek ez a célzott megközelítése javítja az alkalmazás általános teljesítményét.

Ha az alapokat nem ismerjük, készítsünk egy egyszerű To-do React alkalmazást, hogy jobban megértsük Jotai állapotkezelési képességeit.

Állammenedzsment a React Jotai használatával

A kezdéshez hozzon létre egy React alkalmazást. Alternatív megoldásként megteheti használja a Vite-ot egy React projekt beállításához. Miután felállított egy alap React alkalmazást, telepítse a Jotai-t az alkalmazásába.

npm install jotai

Ezután a Jotai használatához az egész alkalmazást be kell csomagolnia a Szolgáltató összetevő. Ez az összetevő tartalmazza azt a tárolót, amely központi csomópontként szolgál az atomértékek biztosításához az alkalmazásban.

Ezenkívül lehetővé teszi az atomok kezdeti állapotának deklarálását. Ha becsomagolja az alkalmazást a Szolgáltató, az alkalmazás összes összetevője hozzáfér az Ön által definiált atomokhoz, majd interakcióba léphetnek velük, és frissíthetik az állapotukat a useAtom horog.

import { Szolgáltató } tól től"jotai";

Most csomagolja be az alkalmazást a index.js vagy main.jsx az alábbiak szerint.

import Reagál tól től'reagál'
import ReactDOM tól től'react-dom/client'
import App tól től'./App.jsx'
import'./index.css'
import { Szolgáltató } tól től"jotai";
ReactDOM.createRoot(dokumentum.getElementById('gyökér')).Vakol(



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

Adattár konfigurálása

Az áruház az alkalmazás állapotának központi tárolójaként működik. Jellemzően tartalmazza az atomok, szelektorok és egyéb kapcsolódó funkciók meghatározását, amelyek a Jotai segítségével történő állapotkezeléshez szükségesek.

Ebben az esetben a Teendők alkalmazás elemlistájának kezeléséhez szükséges atomokat kezeli. Ban,-ben src könyvtár, létrehozás TodoStore.jsx fájlt, és adja hozzá az alábbi kódot.

import {atom} tól től"jotai";
exportconst TodosAtom = atom([]);

Létrehozásával és exportálásával a TodosAtom, kényelmesen kommunikálhat egymással és frissítheti a teendők állapotát az alkalmazás különböző összetevői között.

Valósítsa meg a To-Do alkalmazás funkciót

Most, hogy konfigurálta a Jotai-t a React alkalmazásban, és létrehozott egy atomot az alkalmazás állapotának kezelésére, lépjen tovább előre, és hozzon létre egy egyszerű teendő összetevőt, amely kezeli a teendők hozzáadásának, törlésének és szerkesztésének funkcióit. tételeket.

Újat csinálni összetevők/Todo.jsx fájl a src Könyvtár. Ehhez a fájlhoz adja hozzá az alábbi kódot:

1. Importálja az adattárat és a useAtom horog.

   import React, { useState } tól től'reagál';
   import { TodosAtom } tól től"../TodoStore";
   import { useAtom } tól től'jotai';

2. Hozza létre a funkcionális összetevőt, és adja hozzá a JSX elemeket.

   const Todo = () => {
   
   Visszatérés (
   
   
    helyőrző="Új teendő"
    érték={érték}
    onChange={event => setValue (event.target.value)}
    />
   Todo hozzáadása</button>
   
   
    {todos.map(csinálni => (
   
   
    {todo.text}
    handleDelete (todo.id)}>Törlés</button>
    </li>
    ))}
    </ul>
    </div>
    );
   };