Vzorec React useReducer: Obvladovanje kompleksnega upravljanja stanja

V nenehno razvijajočem se svetu front-end razvoja se je React uveljavil kot vodilni okvir za izdelavo uporabniških vmesnikov. Ko aplikacije postajajo kompleksnejše, postaja upravljanje stanja vse večji izziv. Hook useState ponuja preprost način za upravljanje stanja znotraj komponente, vendar za bolj zapletene scenarije React ponuja močno alternativo: hook useReducer. Ta objava se poglablja v vzorec useReducer, raziskuje njegove prednosti, praktične implementacije in kako lahko bistveno izboljša vaše React aplikacije na globalni ravni.

Razumevanje potrebe po kompleksnem upravljanju stanja

Pri izdelavi React aplikacij se pogosto srečujemo s situacijami, kjer stanje komponente ni zgolj preprosta vrednost, temveč zbirka medsebojno povezanih podatkovnih točk ali stanje, ki je odvisno od prejšnjih vrednosti stanja. Poglejmo si nekaj primerov:

• Avtentikacija uporabnika: Upravljanje statusa prijave, podrobnosti o uporabniku in avtentikacijskih žetonov.
• Obravnava obrazcev: Sledenje vrednostim več vnosnih polj, napakam pri validaciji in statusu oddaje.
• Spletna nakupovalna košarica: Upravljanje artiklov, količin, cen in informacij o zaključku nakupa.
• Aplikacije za klepet v realnem času: Obravnava sporočil, prisotnosti uporabnikov in statusa povezave.

V teh scenarijih lahko uporaba zgolj hooka useState vodi do zapletene in težko obvladljive kode. Posodabljanje več spremenljivk stanja kot odziv na en sam dogodek lahko postane okorno, logika za upravljanje teh posodobitev pa se lahko razprši po komponenti, kar otežuje razumevanje in vzdrževanje. Tu se izkaže useReducer.

Predstavitev hooka useReducer

Hook useReducer je alternativa hooku useState za upravljanje kompleksne logike stanja. Temelji na principih vzorca Redux, vendar je implementiran znotraj same komponente React, kar v mnogih primerih odpravlja potrebo po ločeni zunanji knjižnici. Omogoča vam centralizacijo logike posodabljanja stanja v eni sami funkciji, imenovani reducer.

Hook useReducer sprejme dva argumenta:

• Funkcija reducer: To je čista funkcija, ki kot vhod sprejme trenutno stanje in dejanje (action) ter vrne novo stanje.
• Začetno stanje: To je začetna vrednost stanja.

Hook vrne polje, ki vsebuje dva elementa:

• Trenutno stanje: To je trenutna vrednost stanja.
• Funkcija dispatch: Ta funkcija se uporablja za sprožanje posodobitev stanja s pošiljanjem dejanj (actions) v reducer.

Funkcija reducer

Funkcija reducer je srce vzorca useReducer. Je čista funkcija, kar pomeni, da ne sme imeti stranskih učinkov (kot so klicanje API-jev ali spreminjanje globalnih spremenljivk) in mora za isti vhod vedno vrniti enak izhod. Funkcija reducer sprejme dva argumenta:

• state: Trenutno stanje.
• action: Objekt, ki opisuje, kaj naj se zgodi s stanjem. Dejanja imajo običajno lastnost type, ki označuje vrsto dejanja, in lastnost payload, ki vsebuje podatke, povezane z dejanjem.

Znotraj funkcije reducer uporabite stavek switch ali stavke if/else if za obravnavo različnih vrst dejanj in ustrezno posodabljanje stanja. To centralizira vašo logiko posodabljanja stanja in olajša razumevanje, kako se stanje spreminja kot odziv na različne dogodke.

Funkcija dispatch

Funkcija dispatch je metoda, ki jo uporabljate za sprožanje posodobitev stanja. Ko pokličete dispatch(action), se dejanje posreduje funkciji reducer, ki nato posodobi stanje na podlagi vrste in vsebine (payload) dejanja.

Praktični primer: Implementacija števca

Začnimo s preprostim primerom: komponento števca. Ta ponazarja osnovne koncepte, preden preidemo na bolj zapletene primere. Ustvarili bomo števec, ki se lahko povečuje, zmanjšuje in ponastavi:

import React, { useReducer } from 'react';

// Define action types
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';
const RESET = 'RESET';

// Define the reducer function
function counterReducer(state, action) {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + 1 };
    case DECREMENT:
      return { count: state.count - 1 };
    case RESET:
      return { count: 0 };
    default:
      return state;
  }
}

function Counter() {
  // Initialize useReducer
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: INCREMENT })}>Increment</button>
      <button onClick={() => dispatch({ type: DECREMENT })}>Decrement</button>
      <button onClick={() => dispatch({ type: RESET })}>Reset</button>
    </div>
  );
}

export default Counter;

V tem primeru:

• Definiramo vrste dejanj kot konstante za boljšo vzdržljivost (INCREMENT, DECREMENT, RESET).
• Funkcija counterReducer sprejme trenutno stanje in dejanje. Uporablja stavek switch za določitev, kako posodobiti stanje na podlagi vrste dejanja.
• Začetno stanje je { count: 0 }.
• Funkcija dispatch se uporablja v obravnavalnikih klikov gumbov za sprožanje posodobitev stanja. Na primer, dispatch({ type: INCREMENT }) pošlje dejanje vrste INCREMENT v reducer.

Razširitev primera števca: Dodajanje vsebine (Payload)

Spremenimo števec, da omogočimo povečanje za določeno vrednost. To uvaja koncept vsebine (payload) v dejanju:

import React, { useReducer } from 'react';

const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';
const RESET = 'RESET';
const SET_VALUE = 'SET_VALUE';

function counterReducer(state, action) {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + action.payload };
    case DECREMENT:
      return { count: state.count - action.payload };
    case RESET:
      return { count: 0 };
    case SET_VALUE:
      return { count: action.payload };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });
  const [inputValue, setInputValue] = React.useState(1);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: INCREMENT, payload: parseInt(inputValue) || 1 })}>Increment by {inputValue}</button>
      <button onClick={() => dispatch({ type: DECREMENT, payload: parseInt(inputValue) || 1 })}>Decrement by {inputValue}</button>
      <button onClick={() => dispatch({ type: RESET })}>Reset</button>
       <input
         type="number"
         value={inputValue}
         onChange={(e) => setInputValue(e.target.value)}
       />
      </div>
  );
}

export default Counter;

V tem razširjenem primeru:

• Dodali smo vrsto dejanja SET_VALUE.
• Dejanji INCREMENT in DECREMENT zdaj sprejemata payload, ki predstavlja znesek za povečanje ali zmanjšanje. parseInt(inputValue) || 1 zagotavlja, da je vrednost celo število in privzeto 1, če je vnos neveljaven.
• Dodali smo vnosno polje, ki uporabnikom omogoča nastavitev vrednosti za povečanje/zmanjšanje.

Prednosti uporabe useReducer

Vzorec useReducer ponuja več prednosti pred neposredno uporabo useState za kompleksno upravljanje stanja:

• Centralizirana logika stanja: Vse posodobitve stanja se obravnavajo znotraj funkcije reducer, kar olajša razumevanje in odpravljanje napak pri spremembah stanja.
• Izboljšana organizacija kode: Z ločevanjem logike posodabljanja stanja od logike upodabljanja komponente postane vaša koda bolj organizirana in berljiva, kar spodbuja boljšo vzdržljivost kode.
• Predvidljive posodobitve stanja: Ker so reducerji čiste funkcije, lahko enostavno predvidite, kako se bo stanje spremenilo glede na določeno dejanje in začetno stanje. To močno olajša odpravljanje napak in testiranje.
• Optimizacija zmogljivosti: useReducer lahko pomaga optimizirati zmogljivost, zlasti ko so posodobitve stanja računsko zahtevne. React lahko učinkoviteje optimizira ponovna upodabljanja, ko je logika posodabljanja stanja vsebovana v reducerju.
• Testiranje: Reducerji so čiste funkcije, kar jih naredi enostavne za testiranje. Lahko napišete enotske teste, da zagotovite, da vaš reducer pravilno obravnava različna dejanja in začetna stanja.
• Alternative Reduxu: Za mnoge aplikacije useReducer predstavlja poenostavljeno alternativo Reduxu, kar odpravlja potrebo po ločeni knjižnici in dodatnem delu pri njeni konfiguraciji in upravljanju. To lahko poenostavi vaš razvojni proces, zlasti pri manjših do srednje velikih projektih.

Kdaj uporabiti useReducer

Čeprav useReducer ponuja pomembne prednosti, ni vedno prava izbira. Razmislite o uporabi useReducer, ko:

• Imate kompleksno logiko stanja, ki vključuje več spremenljivk stanja.
• Posodobitve stanja so odvisne od prejšnjega stanja (npr. izračun tekočega seštevka).
• Želite centralizirati in organizirati logiko posodabljanja stanja za boljšo vzdržljivost.
• Želite izboljšati testiranje in predvidljivost posodobitev stanja.
• Iščete vzorec, podoben Reduxu, brez uvajanja ločene knjižnice.

Za preproste posodobitve stanja je useState pogosto zadosten in enostavnejši za uporabo. Pri odločanju upoštevajte kompleksnost vašega stanja in potencial za rast.

Napredni koncepti in tehnike

Kombiniranje useReducer s Context API

Za upravljanje globalnega stanja ali deljenje stanja med več komponentami lahko kombinirate useReducer z Reactovim Context API. Ta pristop je pogosto boljši od Reduxa za manjše do srednje velike projekte, kjer ne želite uvajati dodatnih odvisnosti.

import React, { createContext, useReducer, useContext } from 'react';

// Define action types and reducer (as before)
const INCREMENT = 'INCREMENT';
// ... (other action types and the counterReducer function)

const CounterContext = createContext();

function CounterProvider({ children }) {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (
    <CounterContext.Provider value={{ state, dispatch }}>
      {children}
    </CounterContext.Provider>
  );
}

function useCounter() {
  return useContext(CounterContext);
}

function Counter() {
  const { state, dispatch } = useCounter();

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: INCREMENT })}>Increment</button>
    </div>
  );
}

function App() {
  return (
    <CounterProvider>
      <Counter />
    </CounterProvider>
  );
}

export default App;

V tem primeru:

• Ustvarimo CounterContext z uporabo createContext.
• CounterProvider ovije aplikacijo (ali dele, ki potrebujejo dostop do stanja števca) in zagotavlja state ter dispatch iz useReducer.
• Hook useCounter poenostavlja dostop do konteksta znotraj podrejenih komponent.
• Komponente, kot je Counter, lahko zdaj globalno dostopajo in spreminjajo stanje števca. To odpravlja potrebo po posredovanju stanja in funkcije dispatch skozi več nivojev komponent, kar poenostavlja upravljanje propsov.

Testiranje useReducer

Testiranje reducerjev je preprosto, ker so to čiste funkcije. Funkcijo reducer lahko enostavno testirate ločeno z uporabo ogrodja za enotsko testiranje, kot sta Jest ali Mocha. Tukaj je primer z uporabo Jest:

import { counterReducer } from './counterReducer'; // Assuming counterReducer is in a separate file

const INCREMENT = 'INCREMENT';

describe('counterReducer', () => {
  it('should increment the count', () => {
    const state = { count: 0 };
    const action = { type: INCREMENT };
    const newState = counterReducer(state, action);
    expect(newState.count).toBe(1);
  });

   it('should return the same state for unknown action types', () => {
        const state = { count: 10 };
        const action = { type: 'UNKNOWN_ACTION' };
        const newState = counterReducer(state, action);
        expect(newState).toBe(state); // Assert that the state hasn't changed
    });
});

Testiranje vaših reducerjev zagotavlja, da se obnašajo po pričakovanjih in olajša preoblikovanje vaše logike stanja. To je ključen korak pri gradnji robustnih in vzdržljivih aplikacij.

Optimizacija zmogljivosti z memoizacijo

Pri delu s kompleksnimi stanji in pogostimi posodobitvami razmislite o uporabi useMemo za optimizacijo delovanja vaših komponent, še posebej, če imate izpeljane vrednosti, izračunane na podlagi stanja. Na primer:

import React, { useReducer, useMemo } from 'react';

function reducer(state, action) {
  // ... (reducer logic) 
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);

  // Calculate a derived value, memoizing it with useMemo
  const derivedValue = useMemo(() => {
    // Expensive calculation based on state
    return state.value1 + state.value2;
  }, [state.value1, state.value2]); // Dependencies:  recalculate only when these values change

  return (
    <div>
      <p>Derived Value: {derivedValue}</p>
      <button onClick={() => dispatch({ type: 'UPDATE_VALUE1', payload: 10 })}>Update Value 1</button>
      <button onClick={() => dispatch({ type: 'UPDATE_VALUE2', payload: 20 })}>Update Value 2</button>
    </div>
  );
}

V tem primeru se derivedValue izračuna samo, ko se spremenita state.value1 ali state.value2, kar preprečuje nepotrebne izračune ob vsakem ponovnem upodabljanju. Ta pristop je pogosta praksa za zagotavljanje optimalne zmogljivosti upodabljanja.

Primeri iz resničnega sveta in primeri uporabe

Poglejmo si nekaj praktičnih primerov, kjer je useReducer dragoceno orodje pri gradnji React aplikacij za globalno občinstvo. Upoštevajte, da so ti primeri poenostavljeni za ponazoritev osnovnih konceptov. Dejanske implementacije lahko vključujejo bolj zapleteno logiko in odvisnosti.

1. Filtri izdelkov v spletni trgovini

Predstavljajte si spletno trgovino (pomislite na priljubljene platforme, kot sta Amazon ali AliExpress, ki so na voljo po vsem svetu) z velikim katalogom izdelkov. Uporabniki morajo filtrirati izdelke po različnih kriterijih (cenovni razpon, znamka, velikost, barva, država porekla itd.). useReducer je idealen za upravljanje stanja filtra.

import React, { useReducer } from 'react';

const initialState = {
  priceRange: { min: 0, max: 1000 },
  brand: [], // Array of selected brands
  color: [], // Array of selected colors
  //... other filter criteria
};

function filterReducer(state, action) {
  switch (action.type) {
    case 'UPDATE_PRICE_RANGE':
      return { ...state, priceRange: action.payload };
    case 'TOGGLE_BRAND':
      const brand = action.payload;
      return { ...state, brand: state.brand.includes(brand) ? state.brand.filter(b => b !== brand) : [...state.brand, brand] };
    case 'TOGGLE_COLOR':
      // Similar logic for color filtering
      return { ...state, color: state.color.includes(action.payload) ? state.color.filter(c => c !== action.payload) : [...state.color, action.payload] };
    // ... other filter actions
    default:
      return state;
  }
}

function ProductFilter() {
  const [state, dispatch] = useReducer(filterReducer, initialState);

  // UI components for selecting filter criteria and triggering dispatch actions
  // For example: Range input for price, checkboxes for brands, etc.

  return (
    <div>
      <!-- Filter UI elements -->
    </div>
  );
}

Ta primer prikazuje, kako na nadzorovan način obravnavati več kriterijev filtra. Ko uporabnik spremeni katero koli nastavitev filtra (ceno, znamko itd.), reducer ustrezno posodobi stanje filtra. Komponenta, odgovorna za prikaz izdelkov, nato uporabi posodobljeno stanje za filtriranje prikazanih izdelkov. Ta vzorec podpira gradnjo kompleksnih sistemov filtriranja, ki so običajni na globalnih e-trgovinskih platformah.

2. Večstopenjski obrazci (npr. mednarodni obrazci za pošiljanje)

Mnoge aplikacije vključujejo večstopenjske obrazce, kot so tisti, ki se uporabljajo za mednarodno pošiljanje ali ustvarjanje uporabniških računov s kompleksnimi zahtevami. useReducer se odlično obnese pri upravljanju stanja takšnih obrazcev.

import React, { useReducer } from 'react';

const initialState = {
  step: 1, // Current step in the form
  formData: {
    firstName: '',
    lastName: '',
    address: '',
    city: '',
    country: '',
    // ... other form fields
  },
  errors: {},
};

function formReducer(state, action) {
  switch (action.type) {
    case 'NEXT_STEP':
      return { ...state, step: state.step + 1 };
    case 'PREV_STEP':
      return { ...state, step: state.step - 1 };
    case 'UPDATE_FIELD':
      return { ...state, formData: { ...state.formData, [action.payload.field]: action.payload.value } };
    case 'SET_ERRORS':
      return { ...state, errors: action.payload };
    case 'SUBMIT_FORM':
      // Handle form submission logic here, e.g., API calls
      return state;
    default:
      return state;
  }
}

function MultiStepForm() {
  const [state, dispatch] = useReducer(formReducer, initialState);

  // Rendering logic for each step of the form
  // Based on the current step in the state
  const renderStep = () => {
    switch (state.step) {
      case 1:
        return <Step1 formData={state.formData} dispatch={dispatch} />;
      case 2:
        return <Step2 formData={state.formData} dispatch={dispatch} />;
      // ... other steps
      default:
        return <p>Invalid Step</p>;
    }
  };

  return (
    <div>
      {renderStep()}
      <!-- Navigation buttons (Next, Previous, Submit) based on the current step -->
    </div>
  );
}

To ponazarja, kako na strukturiran in vzdržljiv način upravljati različna polja obrazca, korake in morebitne napake pri validaciji. To je ključnega pomena za gradnjo uporabniku prijaznih procesov registracije ali zaključka nakupa, zlasti za mednarodne uporabnike, ki imajo lahko različna pričakovanja glede na svoje lokalne navade in izkušnje z različnimi platformami, kot sta Facebook ali WeChat.

3. Aplikacije v realnem času (klepet, orodja za sodelovanje)

useReducer je koristen za aplikacije v realnem času, kot so orodja za sodelovanje, kot je Google Docs, ali aplikacije za sporočanje. Obravnava dogodke, kot so prejemanje sporočil, pridružitev/odhod uporabnika in status povezave, ter zagotavlja, da se uporabniški vmesnik posodablja po potrebi.

import React, { useReducer, useEffect } from 'react';

const initialState = {
  messages: [],
  users: [],
  connectionStatus: 'connecting',
};

function chatReducer(state, action) {
  switch (action.type) {
    case 'RECEIVE_MESSAGE':
      return { ...state, messages: [...state.messages, action.payload] };
    case 'USER_JOINED':
      return { ...state, users: [...state.users, action.payload] };
    case 'USER_LEFT':
      return { ...state, users: state.users.filter(user => user.id !== action.payload.id) };
    case 'SET_CONNECTION_STATUS':
      return { ...state, connectionStatus: action.payload };
    default:
      return state;
  }
}

function ChatRoom() {
  const [state, dispatch] = useReducer(chatReducer, initialState);

  useEffect(() => {
    // Establish WebSocket connection (example):
    const socket = new WebSocket('wss://your-websocket-server.com');

    socket.onopen = () => dispatch({ type: 'SET_CONNECTION_STATUS', payload: 'connected' });
    socket.onmessage = (event) => dispatch({ type: 'RECEIVE_MESSAGE', payload: JSON.parse(event.data) });
    socket.onclose = () => dispatch({ type: 'SET_CONNECTION_STATUS', payload: 'disconnected' });

    return () => socket.close(); // Cleanup on unmount
  }, []);

  // Render messages, user list, and connection status based on the state
  return (
    <div>
      <p>Connection Status: {state.connectionStatus}</p>
      <!-- UI for displaying messages, user list, and sending messages -->
    </div>
  );
}

Ta primer predstavlja osnovo za upravljanje klepeta v realnem času. Stanje obravnava shranjevanje sporočil, uporabnike, ki so trenutno v klepetu, in status povezave. Hook useEffect je odgovoren za vzpostavitev povezave WebSocket in obravnavo dohodnih sporočil. Ta pristop ustvarja odziven in dinamičen uporabniški vmesnik, ki ustreza uporabnikom po vsem svetu.

Najboljše prakse za uporabo useReducer

Za učinkovito uporabo useReducer in ustvarjanje vzdržljivih aplikacij upoštevajte te najboljše prakse:

• Definirajte vrste dejanj: Uporabljajte konstante za vrste dejanj (npr. const INCREMENT = 'INCREMENT';). To olajša izogibanje tipkarskim napakam in izboljša berljivost kode.
• Ohranjajte reducerje čiste: Reducerji morajo biti čiste funkcije. Ne smejo imeti stranskih učinkov, kot je spreminjanje globalnih spremenljivk ali klicanje API-jev. Reducer naj samo izračuna in vrne novo stanje na podlagi trenutnega stanja in dejanja.
• Nespremenljive posodobitve stanja: Stanje vedno posodabljajte nespremenljivo. Ne spreminjajte neposredno objekta stanja. Namesto tega ustvarite nov objekt z želenimi spremembami z uporabo razširitvene sintakse (...) ali Object.assign(). To preprečuje nepričakovano obnašanje in omogoča lažje odpravljanje napak.
• Strukturirajte dejanja z vsebino (payloads): Uporabite lastnost payload v svojih dejanjih za posredovanje podatkov v reducer. To naredi vaša dejanja bolj prilagodljiva in omogoča obravnavo širšega nabora posodobitev stanja.
• Uporabite Context API za globalno stanje: Če je treba vaše stanje deliti med več komponentami, kombinirajte useReducer s Context API. To zagotavlja čist in učinkovit način za upravljanje globalnega stanja brez uvajanja zunanjih odvisnosti, kot je Redux.
• Razdelite reducerje za kompleksno logiko: Pri kompleksni logiki stanja razmislite o razdelitvi vašega reducerja na manjše, bolj obvladljive funkcije. To izboljša berljivost in vzdržljivost. Povezana dejanja lahko tudi združite v določenem delu funkcije reducer.
• Testirajte svoje reducerje: Napišite enotske teste za svoje reducerje, da zagotovite, da pravilno obravnavajo različna dejanja in začetna stanja. To je ključnega pomena za zagotavljanje kakovosti kode in preprečevanje regresij. Testi naj pokrivajo vse možne scenarije sprememb stanja.
• Razmislite o optimizaciji zmogljivosti: Če so vaše posodobitve stanja računsko zahtevne ali sprožajo pogosta ponovna upodabljanja, uporabite tehnike memoizacije, kot je useMemo, za optimizacijo delovanja vaših komponent.
• Dokumentacija: Zagotovite jasno dokumentacijo o stanju, dejanjih in namenu vašega reducerja. To pomaga drugim razvijalcem razumeti in vzdrževati vašo kodo.

Zaključek

Hook useReducer je močno in vsestransko orodje za upravljanje kompleksnega stanja v React aplikacijah. Ponuja številne prednosti, vključno s centralizirano logiko stanja, izboljšano organizacijo kode in povečano možnostjo testiranja. Z upoštevanjem najboljših praks in razumevanjem njegovih osnovnih konceptov lahko izkoristite useReducer za gradnjo bolj robustnih, vzdržljivih in zmogljivih React aplikacij. Ta vzorec vam omogoča učinkovito reševanje kompleksnih izzivov upravljanja stanja, kar vam omogoča gradnjo globalno pripravljenih aplikacij, ki zagotavljajo brezhibno uporabniško izkušnjo po vsem svetu.

Ko se boste poglabljali v razvoj z Reactom, bo vključitev vzorca useReducer v vaš nabor orodij nedvomno vodila do čistejših, bolj razširljivih in lažje vzdržljivih kodnih baz. Vedno upoštevajte specifične potrebe vaše aplikacije in za vsako situacijo izberite najboljši pristop k upravljanju stanja. Srečno kodiranje!