Implementering av React useActionState: Handlingsbaserad state-hantering

Reacts useActionState-hook, som introducerades i senare versioner, erbjuder ett förfinat sätt att hantera tillståndsuppdateringar (state updates) som är ett resultat av asynkrona handlingar. Detta kraftfulla verktyg strömlinjeformar processen för att hantera mutationer, uppdatera UI och hantera feltillstånd, särskilt när man arbetar med React Server Components (RSC) och server actions. Denna guide kommer att utforska detaljerna i useActionState och ge praktiska exempel och bästa praxis för implementering.

Förstå behovet av handlingsbaserad state-hantering

Traditionell state-hantering i React innebär ofta att man hanterar laddnings- och feltillstånd separat i komponenter. När en handling (t.ex. att skicka ett formulär, hämta data) utlöser en tillståndsuppdatering, hanterar utvecklare vanligtvis dessa tillstånd med flera useState-anrop och potentiellt komplex villkorlig logik. useActionState ger en renare och mer integrerad lösning.

Tänk på ett enkelt scenario för formulärinskickning. Utan useActionState skulle du kunna ha:

• En state-variabel för formulärdata.
• En state-variabel för att spåra om formuläret skickas (laddningstillstånd).
• En state-variabel för att hålla eventuella felmeddelanden.

Detta tillvägagångssätt kan leda till mångordig kod och potentiella inkonsekvenser. useActionState konsoliderar dessa aspekter i en enda hook, vilket förenklar logiken och förbättrar kodens läsbarhet.

Introduktion till useActionState

useActionState-hooken accepterar två argument:

1. En asynkron funktion ("handlingen") som utför tillståndsuppdateringen. Detta kan vara en server action eller vilken asynkron funktion som helst.
2. Ett initialt state-värde.

Den returnerar en array som innehåller två element:

1. Det aktuella state-värdet.
2. En funktion för att skicka (dispatch) handlingen. Denna funktion hanterar automatiskt laddnings- och feltillstånd som är associerade med handlingen.

Här är ett grundläggande exempel:

import { useActionState } from 'react'; async function updateServer(prevState, formData) { // Simulera en asynkron serveruppdatering. await new Promise(resolve => setTimeout(resolve, 1000)); const data = Object.fromEntries(formData); if (data.name === "error") { return 'Misslyckades med att uppdatera servern.'; } return `Uppdaterade namn till: ${data.name}`; } function MyComponent() { const [state, dispatch] = useActionState(updateServer, 'Initialt tillstånd'); async function handleSubmit(event) { event.preventDefault(); const formData = new FormData(event.target); const result = await dispatch(formData); console.log(result); } return (

Namn: Uppdatera

Tillstånd: {state}

); }

I detta exempel:

• updateServer är den asynkrona handlingen som simulerar en uppdatering av en server. Den tar emot det föregående tillståndet och formulärdata.
• useActionState initialiserar tillståndet med 'Initialt tillstånd' och returnerar det aktuella tillståndet och dispatch-funktionen.
• handleSubmit-funktionen anropar dispatch med formulärdata. useActionState hanterar automatiskt laddnings- och feltillstånd under handlingens exekvering.

Hantering av laddnings- och feltillstånd

En av de främsta fördelarna med useActionState är dess inbyggda hantering av laddnings- och feltillstånd. dispatch-funktionen returnerar ett promise som löses med resultatet av handlingen. Om handlingen kastar ett fel, avvisas promis-et med felet. Du kan använda detta för att uppdatera UI:t därefter.

Modifiera det föregående exemplet för att visa ett laddningsmeddelande och ett felmeddelande:

import { useActionState } from 'react'; import { useState } from 'react'; async function updateServer(prevState, formData) { // Simulera en asynkron serveruppdatering. await new Promise(resolve => setTimeout(resolve, 1000)); const data = Object.fromEntries(formData); if (data.name === "error") { throw new Error('Misslyckades med att uppdatera servern.'); } return `Uppdaterade namn till: ${data.name}`; } function MyComponent() { const [state, dispatch] = useActionState(updateServer, 'Initialt tillstånd'); const [isSubmitting, setIsSubmitting] = useState(false); const [errorMessage, setErrorMessage] = useState(null); async function handleSubmit(event) { event.preventDefault(); const formData = new FormData(event.target); setIsSubmitting(true); setErrorMessage(null); try { const result = await dispatch(formData); console.log(result); } catch (error) { console.error("Fel under inskickning:", error); setErrorMessage(error.message); } finally { setIsSubmitting(false); } } return (

Namn: Uppdatera {isSubmitting &&

Laddar...

} {errorMessage &&

Fel: {errorMessage}

}

Tillstånd: {state}

); }

Viktiga ändringar:

• Vi lade till state-variablerna isSubmitting och errorMessage för att spåra laddnings- och feltillstånd.
• I handleSubmit sätter vi isSubmitting till true innan vi anropar dispatch och fångar eventuella fel för att uppdatera errorMessage.
• Vi inaktiverar skicka-knappen under inskickning och visar laddnings- och felmeddelanden villkorligt.

useActionState med Server Actions i React Server Components (RSC)

useActionState briljerar när den används med React Server Components (RSC) och server actions. Server actions är funktioner som körs på servern och kan direkt mutera datakällor. De låter dig utföra operationer på serversidan utan att skriva API-slutpunkter.

Obs: Detta exempel kräver en React-miljö konfigurerad för Server Components och Server Actions.

// app/actions.js (Server Action) 'use server'; import { cookies } from 'next/headers'; // Exempel, för Next.js export async function updateName(prevState, formData) { const name = formData.get('name'); if (!name) { return 'Vänligen ange ett namn.'; } try { // Simulera databasuppdatering. await new Promise(resolve => setTimeout(resolve, 1000)); cookies().set('userName', name); return `Uppdaterade namn till: ${name}`; // Lyckades! } catch (error) { console.error("Databasuppdatering misslyckades:", error); return 'Misslyckades med att uppdatera namn.'; // Viktigt: Returnera ett meddelande, kasta inte ett fel (Error) } } // app/page.jsx (React Server Component) 'use client'; import { useActionState } from 'react'; import { updateName } from './actions'; function MyComponent() { const [state, dispatch] = useActionState(updateName, 'Initialt tillstånd'); async function handleSubmit(event) { event.preventDefault(); const formData = new FormData(event.target); const result = await dispatch(formData); console.log(result); } return (

Namn: Uppdatera

Tillstånd: {state}

); } export default MyComponent;

I detta exempel:

• updateName är en server action definierad i app/actions.js. Den tar emot det föregående tillståndet och formulärdata, uppdaterar databasen (simulerat) och returnerar ett framgångs- eller felmeddelande. Avgörande är att handlingen returnerar ett meddelande istället för att kasta ett fel. Server Actions föredrar att returnera informativa meddelanden.
• Komponenten är markerad som en klientkomponent ('use client') för att använda useActionState-hooken.
• handleSubmit-funktionen anropar dispatch med formulärdata. useActionState hanterar automatiskt tillståndsuppdateringen baserat på resultatet från server-handlingen.

Viktiga överväganden för Server Actions

• Felhantering i Server Actions: Istället för att kasta fel, returnera ett meningsfullt felmeddelande från din Server Action. useActionState kommer att behandla detta meddelande som det nya tillståndet. Detta möjliggör smidig felhantering på klienten.
• Optimistiska uppdateringar: Server actions kan användas med optimistiska uppdateringar för att förbättra den upplevda prestandan. Du kan uppdatera UI:t omedelbart och återställa om handlingen misslyckas.
• Omvalidering: Efter en lyckad mutation, överväg att omvalidera cachad data för att säkerställa att UI:t återspeglar det senaste tillståndet.

Avancerade tekniker med useActionState

1. Använda en Reducer för komplexa tillståndsuppdateringar

För mer komplex tillståndslogik kan du kombinera useActionState med en reducer-funktion. Detta gör att du kan hantera tillståndsuppdateringar på ett förutsägbart och underhållbart sätt.

import { useActionState } from 'react'; import { useReducer } from 'react'; const initialState = { count: 0, message: 'Initialt tillstånd', }; function reducer(state, action) { switch (action.type) { case 'INCREMENT': return { ...state, count: state.count + 1 }; case 'DECREMENT': return { ...state, count: state.count - 1 }; case 'SET_MESSAGE': return { ...state, message: action.payload }; default: return state; } } async function updateState(state, action) { // Simulera asynkron operation. await new Promise(resolve => setTimeout(resolve, 500)); switch (action.type) { case 'INCREMENT': return reducer(state, action); case 'DECREMENT': return reducer(state, action); case 'SET_MESSAGE': return reducer(state, action); default: return state; } } function MyComponent() { const [state, dispatch] = useActionState(updateState, initialState); return (

Antal: {state.count}

Meddelande: {state.message}

dispatch({ type: 'INCREMENT' })}>Öka dispatch({ type: 'DECREMENT' })}>Minska dispatch({ type: 'SET_MESSAGE', payload: 'Nytt meddelande' })}>Sätt meddelande

); }

2. Optimistiska uppdateringar med useActionState

Optimistiska uppdateringar förbättrar användarupplevelsen genom att omedelbart uppdatera UI:t som om handlingen lyckades, och sedan återställa uppdateringen om handlingen misslyckas. Detta kan få din applikation att kännas mer responsiv.

import { useActionState } from 'react'; import { useState } from 'react'; async function updateServer(prevState, formData) { // Simulera en asynkron serveruppdatering. await new Promise(resolve => setTimeout(resolve, 1000)); const data = Object.fromEntries(formData); if (data.name === "error") { throw new Error('Misslyckades med att uppdatera servern.'); } return `Uppdaterade namn till: ${data.name}`; } function MyComponent() { const [name, setName] = useState('Initialt namn'); const [state, dispatch] = useActionState(async (prevName, newName) => { try { const result = await updateServer(prevName, { name: newName, }); return newName; // Uppdatera vid framgång } catch (error) { // Återställ vid fel console.error("Uppdatering misslyckades:", error); setName(prevName); return prevName; } }, name); async function handleSubmit(event) { event.preventDefault(); const formData = new FormData(event.target); const newName = formData.get('name'); setName(newName); // Uppdatera UI optimistiskt await dispatch(newName); } return (

Namn: Uppdatera

Nuvarande namn: {name}

Tillstånd: {state}

); }

3. Debouncing av handlingar

I vissa scenarier kanske du vill använda "debounce" på handlingar för att förhindra att de skickas för ofta. Detta kan vara användbart för scenarier som sökfält där du bara vill utlösa en handling efter att användaren har slutat skriva under en viss period.

import { useActionState } from 'react'; import { useState, useEffect } from 'react'; async function searchItems(prevState, query) { // Simulera asynkron sökning. await new Promise(resolve => setTimeout(resolve, 500)); return `Sökresultat för: ${query}`; } function MyComponent() { const [query, setQuery] = useState(''); const [state, dispatch] = useActionState(searchItems, 'Initialt tillstånd'); useEffect(() => { const timeoutId = setTimeout(() => { if (query) { dispatch(query); } }, 300); // Debounce i 300ms return () => clearTimeout(timeoutId); }, [query, dispatch]); return (

Sök: setQuery(e.target.value)} />

Tillstånd: {state}

); }

Bästa praxis för useActionState

• Håll handlingar rena: Se till att dina handlingar är rena funktioner (eller så nära som möjligt). De bör inte ha några sidoeffekter förutom att uppdatera tillståndet.
• Hantera fel smidigt: Hantera alltid fel i dina handlingar och ge informativa felmeddelanden till användaren. Som nämnts ovan med Server Actions, föredra att returnera en felmeddelandesträng från server-handlingen istället för att kasta ett fel.
• Optimera prestanda: Var medveten om prestandakonsekvenserna av dina handlingar, särskilt när du hanterar stora datamängder. Överväg att använda memoiseringstekniker för att undvika onödiga omrenderingar.
• Tänk på tillgänglighet: Se till att din applikation förblir tillgänglig för alla användare, inklusive de med funktionsnedsättningar. Ange lämpliga ARIA-attribut och tangentbordsnavigering.
• Grundlig testning: Skriv enhetstester och integrationstester för att säkerställa att dina handlingar och tillståndsuppdateringar fungerar korrekt.
• Internationalisering (i18n): För globala applikationer, implementera i18n för att stödja flera språk och kulturer.
• Lokalisering (l10n): Anpassa din applikation till specifika lokaler genom att tillhandahålla lokaliserat innehåll, datumformat och valutasymboler.

useActionState kontra andra lösningar för state-hantering

Även om useActionState erbjuder ett bekvämt sätt att hantera handlingsbaserade tillståndsuppdateringar, är det inte en ersättning för alla lösningar för state-hantering. För komplexa applikationer med globalt tillstånd som behöver delas mellan flera komponenter, kan bibliotek som Redux, Zustand eller Jotai vara mer lämpliga.

När man ska använda useActionState:

• Tillståndsuppdateringar med enkel till måttlig komplexitet.
• Tillståndsuppdateringar som är tätt kopplade till asynkrona handlingar.
• Integration med React Server Components och Server Actions.

När man ska överväga andra lösningar:

• Komplex global state-hantering.
• Tillstånd som behöver delas mellan ett stort antal komponenter.
• Avancerade funktioner som time-travel debugging eller middleware.

Slutsats

Reacts useActionState-hook erbjuder ett kraftfullt och elegant sätt att hantera tillståndsuppdateringar som utlöses av asynkrona handlingar. Genom att konsolidera laddnings- och feltillstånd förenklar den koden och förbättrar läsbarheten, särskilt när man arbetar med React Server Components och server actions. Att förstå dess styrkor och begränsningar gör att du kan välja rätt state-hanteringsmetod för din applikation, vilket leder till mer underhållbar och effektiv kod.

Genom att följa de bästa praxis som beskrivs i denna guide kan du effektivt utnyttja useActionState för att förbättra din applikations användarupplevelse och utvecklingsflöde. Kom ihåg att överväga komplexiteten i din applikation och välj den state-hanteringslösning som bäst passar dina behov. Från enkla formulärinskickningar till komplexa datamutationer kan useActionState vara ett värdefullt verktyg i din React-utvecklingsarsenal.