React useActionState vahevara konveier: jõuliste toimingute töötlemise ahelate loomine

Reacti useActionState hook pakub võimsa ja elegantse viisi oleku haldamiseks ja asünkroonsete toimingute käsitlemiseks. Kuigi lihtsad toimingud on arusaadavad, nõuavad keerukad rakendused sageli keerukamat toimingute töötlemist. Siin tuleb mängu vahevara konveier, mis võimaldab teil toiminguid pealt kuulata, muuta ja täiustada enne, kui need teie olekut värskendavad. See lähenemisviis soodustab puhtamat koodi, paremat vastutuse eraldamist ja suuremat hooldatavust.

Mis on vahevara konveier?

Vahevara konveier on funktsioonide ahel, millest igaüks saab toimingu ja potentsiaalselt muudab seda või teostab kõrvalmõjusid enne, kui see antakse edasi ahela järgmisele funktsioonile. Ahela viimane funktsioon tavaliselt värskendab olekut, kasutades useActionState pakutavat funktsiooni setState. Mõelge sellele kui konveierile, kus iga jaam teeb sissetuleva toiminguga kindla ülesande.

Vahevara konveieri kasutamise peamised eelised on:

• Vastutuse eraldamine: Igal vahevara funktsioonil on üks vastutus, muutes koodi lihtsamaks mõista ja testida.
• Taaskasutatavus: Vahevara funktsioone saab taaskasutada erinevate toimingute ja komponentide vahel.
• Moodulipõhisus: Rakenduse arenedes on lihtne vahevara funktsioone lisada, eemaldada või ümber korraldada.
• Testitavus: Üksikuid vahevara funktsioone on lihtsam isoleeritult testida.

useActionState'i vahevara konveieri rakendamine

Võtame lahti, kuidas luua useActionState hook vahevara konveieriga. Alustame põhinäitega ja uurime seejärel keerukamaid stsenaariume.

Põhinäide: Toimingute logimine

Esmalt loome lihtsa vahevara, mis logib iga toimingu konsooli.

            // Vahevara funktsioon
const loggerMiddleware = (action, setState) => {
 console.log('Toiming:', action);
 setState(action);
};

// Kohandatud useActionState hook
const useActionStateWithMiddleware = (initialState, middleware) => {
 const [state, setState] = React.useState(initialState);

 const dispatch = React.useCallback(
 action => {
 middleware(action, setState);
 },
 [middleware, setState]
 );

 return [state, dispatch];
};

// Kasutus
const MyComponent = () => {
 const [count, setCount] = useActionStateWithMiddleware(0, loggerMiddleware);

 const increment = () => {
 setCount(count + 1);
 };

 return (
 

 
Loendur: {count}
 Suurenda
 
 );
};
            

              
                Copy
              
            
          

Selles näites:

• loggerMiddleware on lihtne vahevara funktsioon, mis logib toimingu ja seejärel kutsub välja setState, et olekut värskendada.
• useActionStateWithMiddleware on kohandatud hook, mis võtab argumentidena algoleku ja vahevara funktsiooni.
• Funktsioon dispatch luuakse useCallback abil, et vältida tarbetuid uuesti renderdusi. See kutsub välja vahevara funktsiooni toimingu ja setState abil.

Konveieri loomine

Konveieri loomiseks vajame viisi, kuidas mitu vahevara funktsiooni kokku aheldada. Siin on funktsioon, mis just seda teeb:

            const applyMiddleware = (...middlewares) => (action, setState) => {
 middlewares.forEach(middleware => {
 action = middleware(action, setState) || action; // Luba vahevaral toimingut muuta/asendada.
 });
 setState(action);  // See rida täidetakse alati ja määrab lõpliku oleku.
};

            

              
                Copy
              
            
          

Nüüd saame luua keerukama näite mitme vahevara funktsiooniga.

            // Vahevara funktsioonid
const loggerMiddleware = (action) => {
 console.log('Toiming:', action);
 return action;
};

const uppercaseMiddleware = (action) => {
 if (typeof action === 'string') {
 return action.toUpperCase();
 }
 return action;
};

const asyncMiddleware = (action, setState) => {
 if (typeof action === 'function') {
 action((newAction) => setState(newAction));
 return;
 }
 return action;
};

const myMiddleware = (action, setState) => {
 if (action.type === "API_CALL") {
 setTimeout(() => {
 setState(action.payload)
 }, 1000)
 return; //Takistage kohest oleku muutust
 }
 return action;
}

// Kohandatud useActionState hook
const useActionStateWithMiddleware = (initialState, ...middlewares) => {
 const [state, setState] = React.useState(initialState);

 const dispatch = React.useCallback(
 action => {
 applyMiddleware(...middlewares)(action, setState);
 },
 [setState, ...middlewares]
 );

 return [state, dispatch];
};

// Kasutus
const MyComponent = () => {
 const [message, setMessage] = useActionStateWithMiddleware('', loggerMiddleware, uppercaseMiddleware, asyncMiddleware, myMiddleware);

 const updateMessage = (newMessage) => {
 setMessage(newMessage);
 };

 const asyncUpdate = (payload) => (setState) => {
 setTimeout(() => {
 setState(payload);
 }, 2000);
 };

 const apiCall = (payload) => {
 setMessage({type: "API_CALL", payload: payload})
 }

 return (
 

 
Sõnum: {message}
  updateMessage('hello world')}>Uuenda sõnumit
  setMessage(asyncUpdate('Async Hello'))}>Asünkroonne uuendus
  apiCall('Api Data')}>API KUTSE
 
 );
};
            

              
                Copy
              
            
          

Selles põhjalikumas näites:

• Meil on mitu vahevara funktsiooni: loggerMiddleware, uppercaseMiddleware ja asyncMiddleware.
• loggerMiddleware logib toimingu.
• uppercaseMiddleware teisendab toimingu suurtäheks, kui see on string.
• asyncMiddleware käsitleb asünkroonseid toiminguid. Kui toiming on funktsioon, eeldab see, et see on thunk ja kutsub selle välja funktsiooniga setState.
• Hook useActionStateWithMiddleware aktsepteerib nüüd muutuva arvu vahevara funktsioone.
• Funktsioon dispatch kutsub välja applyMiddleware kõigi vahevara funktsioonidega.

Täiustatud vahevara kontseptsioonid

Vigade käsitlemine

Vahevara saab kasutada ka vigade käsitlemiseks. Näiteks saate luua vahevara, mis püüab vigu ja logib need teenusesse, nagu Sentry või Rollbar.

            const errorHandlingMiddleware = (action, setState) => {
 try {
 setState(action);
 } catch (error) {
 console.error('Viga:', error);
 // Logi viga teenusesse, nagu Sentry või Rollbar
 }
};

            

              
                Copy
              
            
          

Tingimuslik vahevara

Mõnikord soovite vahevara funktsiooni rakendada ainult teatud tingimustel. Selle saavutamiseks saate vahevara funktsiooni ümbritseda tingimusliku kontrolliga.

            const conditionalMiddleware = (condition, middleware) => (action, setState) => {
 if (condition(action)) {
 middleware(action, setState);
 } else {
 setState(action);
 }
};

// Kasutus
const useActionStateWithConditionalMiddleware = (initialState, middleware, condition) => {
 const [state, setState] = React.useState(initialState);

 const dispatch = React.useCallback(
 action => {
 if (condition(action)) {
 middleware(action, setState);
 } else {
 setState(action);
 }
 },
 [middleware, setState, condition]
 );

 return [state, dispatch];
};

const MyComponent = () => {
 const [count, setCount] = useActionStateWithConditionalMiddleware(0, loggerMiddleware, (action) => typeof action === 'number');

 const increment = () => {
 setCount(count + 1);
 };

 const updateMessage = (message) => {
 setCount(message);
 };

 return (
 

 
Loendur: {count}
 Suurenda
  updateMessage('Pole number')}>Uuenda sõnumit
 
 );
};
            

              
                Copy
              
            
          

Asünkroonne vahevara

Nagu me nägime varasemas näites, saab vahevara käsitleda asünkroonseid toiminguid. See on kasulik API-kõnede tegemiseks või muude pikaajaliste ülesannete täitmiseks.

            const apiMiddleware = (action, setState) => {
 if (typeof action === 'function') {
 action(setState);
 } else {
 setState(action);
 }
};

// Kasutus
const MyComponent = () => {
 const [data, setData] = useActionStateWithMiddleware(null, apiMiddleware);

 const fetchData = () => (setState) => {
 fetch('https://api.example.com/data')
 .then(response => response.json())
 .then(data => setState(data));
 };

 const handleClick = () => {
 setData(fetchData());
 };

 return (
 

 Hangi andmed
 {data && 
{JSON.stringify(data, null, 2)}
}
 
 );
};
            

              
                Copy
              
            
          

Reaalse maailma näited

Vaatame mõningaid reaalse maailma näiteid, kuidas saate vahevara konveiereid oma Reacti rakendustes kasutada.

Autentimine

Vahevara abil saate autentimist käsitleda. Näiteks saate luua vahevara, mis pealtkuulab toiminguid, mis nõuavad autentimist, ja suunab kasutaja sisselogimislehele, kui ta pole sisse logitud.

            const authMiddleware = (action, setState) => {
 if (action.type === 'PROTECTED_ACTION' && !isAuthenticated()) {
 redirectToLoginPage();
 } else {
 setState(action);
 }
};

            

              
                Copy
              
            
          

Andmete valideerimine

Vahevara abil saate andmeid valideerida enne, kui need olekusse salvestatakse. Näiteks saate luua vahevara, mis kontrollib, kas vormi esitamine on kehtiv, ja kuvab veateate, kui see pole nii.

            const validationMiddleware = (action, setState) => {
 if (action.type === 'FORM_SUBMIT') {
 const errors = validateForm(action.payload);
 if (errors.length > 0) {
 displayErrorMessages(errors);
 } else {
 setState(action.payload);
 }
 } else {
 setState(action);
 }
};

            

              
                Copy
              
            
          

Analüütika

Vahevara abil saate jälgida kasutaja interaktsioone ja saata analüütika andmeid teenusesse, nagu Google Analytics või Mixpanel.

            const analyticsMiddleware = (action, setState) => {
 trackEvent(action.type, action.payload);
 setState(action);
};

function trackEvent(eventType, eventData) {
 // Asenda oma analüütika jälgimiskoodiga
 console.log(`Jälgitakse sündmust: ${eventType} andmetega:`, eventData);
}

            

              
                Copy
              
            
          

Globaalsed kaalutlused

Globaalse publikuga rakenduste loomisel on oluline arvestada selliste teguritega nagu:

• Lokaliseerimine: Vahevara saab kasutada lokaliseerimise käsitlemiseks, näiteks kuupäevade, numbrite ja valuutade vormindamiseks vastavalt kasutaja lokaadile.
• Juurdepääsetavus: Veenduge, et teie vahevara funktsioonid oleksid juurdepääsetavad puuetega kasutajatele. Näiteks pakkuge piltidele alternatiivset teksti ja kasutage semantilist HTML-i.
• Jõudlus: Olge teadlik oma vahevara funktsioonide jõudluse mõjust, eriti kui tegemist on suurte andmekogumite või keerukate arvutustega.
• Ajavööndid: Kuupäevade ja kellaaegade käsitlemisel arvestage ajavööndite erinevustega. Vahevara abil saab kuupäevad ja kellaajad teisendada kasutaja kohalikku ajavööndisse.
• Kultuuriline tundlikkus: Olge teadlik kultuurilistest erinevustest ja vältige sellise keele või kujutiste kasutamist, mis võivad olla solvavad või sobimatud.

Vahevara kasutamise eelised useActionState'is

• Täiustatud koodi korraldus: Jagades vastutuse eraldiseisvateks vahevara funktsioonideks, muutub teie kood moodulsemaks ja lihtsamini hooldatavaks.
• Parem testitavus: Iga vahevara funktsiooni saab testida iseseisvalt, mis muudab teie koodi kvaliteedi tagamise lihtsamaks.
• Suurenenud taaskasutatavus: Vahevara funktsioone saab taaskasutada erinevates komponentides ja rakendustes, säästes teie aega ja vaeva.
• Suurem paindlikkus: Vahevara konveierid võimaldavad teil hõlpsalt lisada, eemaldada või ümber korraldada vahevara funktsioone vastavalt teie rakenduse arengule.
• Lihtsustatud silumine: Logides vahevaras toiminguid ja oleku muutusi, saate väärtuslikku teavet oma rakenduse käitumise kohta.

Võimalikud puudused

• Suurenenud keerukus: Vahevara kasutuselevõtt võib teie rakendusse lisada keerukust, eriti kui te pole selle kontseptsiooniga tuttav.
• Jõudluse kulu: Iga vahevara funktsioon lisab väikese koguse kulu, mis võib mõjutada jõudlust, kui teil on suur hulk vahevara funktsioone.
• Silumisega seotud väljakutsed: Vahevara konveierite silumine võib olla keeruline, eriti kui teil on keerukas loogika või asünkroonsed toimingud.

Parimad tavad

• Hoidke vahevara funktsioonid väikesed ja fokusseeritud: Igal vahevara funktsioonil peaks olema üks vastutus.
• Kirjutage oma vahevara funktsioonidele ühikuteste: Veenduge, et teie vahevara funktsioonid töötaksid õigesti, kirjutades ühikuteste.
• Kasutage oma vahevara funktsioonide jaoks kirjeldavaid nimesid: See muudab lihtsamaks mõista, mida iga vahevara funktsioon teeb.
• Dokumenteerige oma vahevara funktsioonid: Selgitage iga vahevara funktsiooni eesmärki ja seda, kuidas see töötab.
• Olge teadlik jõudlusest: Vältige kulukate toimingute tegemist oma vahevara funktsioonides.

Alternatiivid vahevara konveieritele

Kuigi vahevara konveierid on võimas tööriist, on ka muid lähenemisviise, mida saate kasutada Reactis keeruka toimingute töötlemise käsitlemiseks.

• Redux: Redux on populaarne olekuhalduse teek, mis kasutab vahevara asünkroonsete toimingute ja muude kõrvalmõjude käsitlemiseks.
• Context API: Context API on sisseehitatud Reacti funktsioon, mis võimaldab teil olekut komponentide vahel jagada ilma rekvisiitide puurimiseta. Context API abil saate luua globaalse olekuhoidla ja saata oleku värskendamiseks toiminguid.
• Kohandatud Hooks: Keeruka loogika kapseldamiseks ja oleku haldamiseks saate luua kohandatud hook'e.

Järeldus

Reacti useActionState hook koos vahevara konveieritega pakub võimsa ja paindliku viisi oleku haldamiseks ja keeruka toimingute töötlemise käsitlemiseks. Jagades vastutuse eraldiseisvateks vahevara funktsioonideks, saate luua puhtamat, hooldatavamat ja testitavamat koodi. Kuigi on mõningaid võimalikke puudusi, kaaluvad vahevara konveierite kasutamise eelised sageli kulud üles, eriti suurtes ja keerukates rakendustes. Järgides parimaid tavasid ja kaaludes oma koodi globaalseid tagajärgi, saate luua jõulisi ja skaleeritavaid rakendusi, mis vastavad kasutajate vajadustele kogu maailmas.