React useFormStatus Progress Calculator: Valós idejű állapotjelző a jobb felhasználói élményért

A modern webalkalmazásokban elengedhetetlen, hogy a felhasználók számára világos és azonnali visszajelzést nyújtsunk az űrlapok elküldése során a pozitív felhasználói élmény érdekében. Az egyik hatékony technika a valós idejű állapotjelző megvalósítása, amely vizuális megerősítést ad a felhasználóknak arról, hogy az adataik feldolgozás alatt állnak. Ez nemcsak csökkenti a felhasználói szorongást, hanem növeli az elkötelezettséget is. A React `useFormStatus` hook, a stratégiai állapotkövetéssel kombinálva, lehetővé teszi a fejlesztők számára, hogy kifinomult és informatív állapotjelzőket hozzanak létre.

A React useFormStatus megértése

A React 18-ban bevezetett `useFormStatus` hook információt nyújt egy `

import React from 'react';
import { useFormStatus } from 'react-dom';

function MyForm() {
  const { pending } = useFormStatus();

  async function handleSubmit(formData: FormData) {
    'use server';
    // Lassú szerver oldali művelet szimulálása
    await new Promise(resolve => setTimeout(resolve, 2000));
    console.log('Az űrlap sikeresen elküldve!');
  }

  return (
    
      
      
        {pending ? 'Küldés...' : 'Küldés'}
      
    
  );
}

export default MyForm;

Ebben az egyszerűsített példában a `useFormStatus` segítségével letiltjuk a küldés gombot, és megjelenítünk egy "Küldés..." üzenetet, amíg az űrlap függőben van. Ez alapvető visszajelzést nyújt a felhasználónak.

Valós idejű állapotjelző megvalósítása

Egy kifinomultabb állapotjelző létrehozásához nyomon kell követnünk az űrlapküldési folyamat állapotát. Ez gyakran magában foglalja a küldés több szakaszra vagy lépésre bontását. Bár a `useFormStatus` önmagában nem nyújt részletes állapotfrissítéseket, kombinálhatjuk egyedi logikával ennek eléréséhez.

Példa forgatókönyv: Fájl feltöltése

Tekintsük a fájlfeltöltés forgatókönyvét. A küldési folyamat a következő lépéseket tartalmazhatja:

1. A fájl validálása.
2. A kép átméretezése (ha alkalmazható).
3. A fájl feltöltése a szerverre.
4. Az adatbázis frissítése.

Az egyes lépések befejezése alapján megbecsülhetjük az állapotot.

Kód megvalósítása állapotkövetéssel

import React, { useState } from 'react';
import { useFormStatus } from 'react-dom';

function FileUploadForm() {
  const { pending } = useFormStatus();
  const [progress, setProgress] = useState(0);

  async function handleSubmit(formData: FormData) {
    'use server';
    // Validálás szimulálása (20%)
    await simulateProgress(20, setProgress);
    console.log('A fájl validálása befejeződött');

    // Átméretezés szimulálása (30%)
    await simulateProgress(30, setProgress);
    console.log('A fájl átméretezése befejeződött');

    // Feltöltés szimulálása (40%)
    await simulateProgress(40, setProgress);
    console.log('A fájl feltöltése befejeződött');

    // Adatbázis frissítés szimulálása (10%)
    await simulateProgress(10, setProgress);
    console.log('Az adatbázis frissítve');

    console.log('A fájl sikeresen feltöltve!');
  }

  async function simulateProgress(percentage: number, setProgress: (value: ((prevState: number) => number) | number) => void) {
    return new Promise(resolve => {
      setTimeout(() => {
        setProgress(prevProgress => prevProgress + percentage);
        resolve(null);
      }, 500);
    });
  }

  return (
    

      
      
        {pending ? 'Feltöltés...' : 'Feltöltés'}
      
      {pending && (
        

          Állapot: {progress}%
          
        
      )}
    
  );
}

export default FileUploadForm;

Magyarázat:

• A `useState` hook segítségével kezeljük az `progress` állapotot, amely 0-ra van inicializálva.
• A `handleSubmit` függvény most a fájlfeltöltési folyamat különböző szakaszait szimulálja, amelyek mindegyike frissíti a `progress` állapotot a `simulateProgress` függvény segítségével.
• A `simulateProgress` függvény a `setTimeout` függvényt használja az aszinkron műveletek szimulálására és az állapot százalékos növekményes frissítésére. Ez vizuális ábrázolást hoz létre a felhasználó számára.
• Amíg az űrlap `pending` állapotban van, megjelenítünk egy állapotjelző sávot a HTML5 `` elem segítségével, amely tükrözi az aktuális `progress` értéket.

Az állapotjelző testreszabása

Az állapotjelző vizuális megjelenítése többféleképpen testreszabható:

• Állapotjelző sáv stílusozása: Használjon CSS-t a `` elem stílusozásához, vagy hozzon létre egy egyéni állapotjelző sávot `
  ` elemek és CSS animációk segítségével. Vegye figyelembe a márka színeit és stílusát, hogy illeszkedjen az alkalmazás tervezéséhez.
• Szöveges frissítések: Adjon meg részletesebb frissítéseket, például "Fájl validálása...", "Kép átméretezése..." stb. üzeneteket az állapotjelző sáv mellett.
• Vizuális visszajelzés: Animációk vagy ikonok segítségével tovább javíthatja a vizuális visszajelzést. Egy betöltő pörgettyű vagy egy pipa animáció a befejezéskor javíthatja a felhasználói élményt.

Hibák és határhelyzetek kezelése

Kulcsfontosságú a potenciális hibák kezelése az űrlapküldési folyamat során. A `useFormStatus` hook egy `error` tulajdonságot biztosít, amely felhasználható a felhasználó számára megjelenítendő hibaüzenetekhez.

import React, { useState } from 'react';
import { useFormStatus } from 'react-dom';

function ErrorHandlingForm() {
  const { pending, error } = useFormStatus();
  const [progress, setProgress] = useState(0);

  async function handleSubmit(formData: FormData) {
    'use server';
    try {
      // Validálás szimulálása (20%)
      await simulateProgress(20, setProgress);
      console.log('A fájl validálása befejeződött');

      // Hiba szimulálása a feltöltés során (50% után)
      if (progress >= 50) {
        throw new Error('Nem sikerült feltölteni a fájlt.');
      }

      // Átméretezés szimulálása (30%)
      await simulateProgress(30, setProgress);
      console.log('A fájl átméretezése befejeződött');

      // Feltöltés szimulálása (40%)
      await simulateProgress(40, setProgress);
      console.log('A fájl feltöltése befejeződött');

      // Adatbázis frissítés szimulálása (10%)
      await simulateProgress(10, setProgress);
      console.log('Az adatbázis frissítve');

      console.log('A fájl sikeresen feltöltve!');
    } catch (err: any) {
      console.error('Hiba a feltöltés során:', err);
      //Kezelje a hibát megfelelően.
      throw err;
    }
  }

  async function simulateProgress(percentage: number, setProgress: (value: ((prevState: number) => number) | number) => void) {
    return new Promise(resolve => {
      setTimeout(() => {
        setProgress(prevProgress => prevProgress + percentage);
        resolve(null);
      }, 500);
    });
  }

  return (
    

      
      
        {pending ? 'Feltöltés...' : 'Feltöltés'}
      
      {pending && (
        

          Állapot: {progress}%
          
        
      )}
      {error && 
Hiba: {error.message}
}
    
  );
}

export default ErrorHandlingForm;

Fontos szempontok:

• Hibahatárok: Csomagolja be az űrlapot egy hibahatáron belülre a váratlan hibák kecses kezeléséhez.
• Felhasználóbarát üzenetek: Jelenítsen meg világos és informatív hibaüzeneteket a felhasználó számára, amelyek útmutatást nyújtanak a probléma megoldásához. Kerülje a technikai zsargont, és összpontosítson a végrehajtható tanácsokra.
• Visszaállítás: Ha hiba történik, fontolja meg egy visszaállítási mechanizmus megvalósítását a küldési folyamat során végrehajtott változtatások visszaállításához.

Akadálymentességi szempontok

Győződjön meg arról, hogy az állapotjelző minden felhasználó számára elérhető, beleértve a fogyatékkal élőket is:

• ARIA attribútumok: Használjon ARIA attribútumokat, például `aria-valuenow`, `aria-valuemin` és `aria-valuemax` az állapotjelző sáv szemantikai információinak megadásához a képernyőolvasók számára.
• Elegendő kontraszt: Győződjön meg arról, hogy az állapotjelző sáv elegendő színkontraszttal rendelkezik a látássérült felhasználók számára.
• Billentyűzet navigáció: Győződjön meg arról, hogy az űrlap és elemei navigálhatók a billentyűzet segítségével.
• Fókuszkezelés: Kezelje megfelelően a fókuszt, különösen hibaüzenetek megjelenítésekor vagy a küldési folyamat befejezésekor.

Valós példák és felhasználási esetek

A valós idejű állapotjelző használata számos forgatókönyvben előnyös:

• Nagy fájlfeltöltések: Visszajelzést ad a felhasználóknak a nagy fájlok, például videók vagy nagy felbontású képek feltöltésének állapotáról.
• Összetett adatfeldolgozás: Tájékoztatja a felhasználókat az összetett adatfeldolgozási műveletek állapotáról, például jelentések generálásáról vagy nagy adatkészletek elemzéséről.
• Többlépcsős űrlapok: Végigvezeti a felhasználókat a többlépcsős űrlapokon, bemutatva az egyes lépésekben elért állapotot.
• E-kereskedelmi pénztárak: Visszajelzést ad a pénztár folyamata során, megnyugtatva a felhasználókat, hogy megrendelésük feldolgozás alatt áll.
• Szoftvertelepítések: Megjeleníti a szoftvertelepítések vagy frissítések állapotát.

Például egy felhőalapú tárolási szolgáltatás használhat egy állapotjelző sávot a fájlok feltöltési állapotának jelzésére, míg egy online képszerkesztő használhatja a szűrők vagy effektusok alkalmazásának állapotának megjelenítésére.

Ajánlott eljárások az állapotjelzők megvalósításához

• Pontosan becsülje meg az állapotot: Törekedjen arra, hogy a lehető legpontosabban becsülje meg az állapotot, reális visszajelzést nyújtva a felhasználónak. Az állapot túlbecslése frusztrációhoz vezethet, ha a folyamat a vártnál tovább tart.
• Részletes frissítések biztosítása: Biztosítson gyakori és részletes frissítéseket az állapotjelzőhöz, ezzel folyamatos állapotérzetet adva a felhasználónak.
• Kerülje az állapot ugrásait: Kerülje az állapot hirtelen ugrásait, mivel ez megrázó és zavaró lehet a felhasználó számára. A sima átmenetek előnyösebbek.
• Optimalizálja a teljesítményt: Optimalizálja az állapot számítási logikájának teljesítményét, hogy elkerülje az alkalmazás általános teljesítményének befolyásolását.
• Alaposan tesztelje: Alaposan tesztelje az állapotjelzőt különböző körülmények között, beleértve a különböző hálózati sebességeket és fájlméreteket is, hogy biztosítsa a pontos és megbízható visszajelzést.

Alternatívák a useFormStatus-hoz az állapotkövetéshez

Bár a `useFormStatus` kiváló az alapvető űrlapküldés követéséhez, más megközelítések is alkalmazhatók a részletesebb állapotkezeléshez:

• Egyéni hook-ok ígéretekkel: Hozzon létre egyéni React hook-okat, amelyek aszinkron műveleteket (például fájlfeltöltéseket) csomagolnak, és ígéreteket használnak az állapot követésére.
• Web Workers: Terhelje át a számításigényes feladatokat (például a kép átméretezését) Web Workers-re, hogy megakadályozza a fő szál blokkolását és simább állapotfrissítéseket biztosítson.
• Server-Sent Events (SSE): Használjon SSE-t a valós idejű frissítések fogadásához a szerverről a háttérfeladatok állapotáról.
• WebSockets: Használjon WebSockets-et a szerverrel való kétirányú kommunikációhoz, amely lehetővé teszi a bonyolultabb állapotkövetést és visszajelzési mechanizmusokat.

Következtetés