React: Kas ir useReducer un kā tas atšķirās no useState?

Tagad jums ir diezgan labi jāsaprot useState āķis un jāspēj to praktiski pielietot savos risinājumos. Tomēr useState āķim ir savi ierobežojumi. Piemēram, useState var kļūt apgrūtinošs, ja jums ir sarežģīta steita loģika, kas ietver vairākas apakšvērtības, vai ja nākamais steits ir atkarīgs no iepriekšējā. Šajās situācijās lietderīgāk ir izmantot Reducer āķi ar kuru var nodrošināt daudz labāku alternatīvu. Šajā rakstā jūs uzzināsiet vairāk par Reducer izmantošanu un to, kā tas atšķiras no useState. Jūs varat domāt par useReducer kā plaši pielietojamu steitu. useState hook sākas ar sākotnējo steitu, bet useReducer hook iegūst reducer funkciju papildus sākotnējam stāvoklim. Tas ir izdevīgi, jo reducer funkcijas otrais arguments ir darbības objekts. Šim objektam ir vairākas tipa vērtības, un, pamatojoties uz katru no šīm vērtībām, varat izsaukt nosūtīšanas funkciju, lai veiktu noteiktu darbību.

Pieņemsim, ka mūsu uzdevums ir izveidot React lietotni izdevumu un ienākumu uzskaitei kādā uzņemumā, ko varētu lietot uzņēmuma darbinieki. Šaja gadījumā izmantosim useReducer jo, izmantojot useState āķi, risinājums šim jautājumam būtu nevajadzīgi plašs. Šī ir lieliska iespēja ieviest useReducer hook, lai vienkārši sekotu līdzi sastāvdaļu iegādes izmaksām un ienākumiem, piemēram kas gūti, pārdodot gatavo ēdienu klientiem. Tagad izpētīsim, kā koda piemērā ieviest useReducer āķi, lai uzlabotu jūsu izpratni.

Izmantojot šo lietotni, es varu izsekot divām darbībām. Ēdienu gatavošanas sastāvdaļu iegādes izmaksas un ieņēmumos no gatavo maltīšu pārdošanas klientiem restorānā. Vienkāršības labad esmu pievienojis tikai divas darbības. Reducer funkcija ieņem iepriekšējo steitu un darbību atgriež ar jauno steitu. Darbības veids nosaka reducer konkrēto darbību. Darbībām var būt jebkāda forma. Pēc vienošanās parasti tiek nodoti objekti ar tipa rekvizītu, kas identificē darbību. Jums jāiekļauj minimālā nepieciešamā informācija, kas reducētājam ir nepieciešama, lai aprēķinātu nākamo steitu.  Tā vietā, lai izmantotu setState, piemēram, useState hook, jūs izmantojat useReducer hook nosūtīšanas metodi. Tas pieņem objekta literālu ar vienu rekvizītu, ko sauc par tipu, kas iestatīts uz atbilstošu darbības datu tipu, kura darbība ir definēta reduktora funkcijā. Nospiežot pogu “Dārzeņu iepirkšana”, summa makā samazinās par desmit. Kad uzspiežu “Pārdot maltīti”, summa makā palielinās par desmit. Izmantojot useReducer, varat definēt vairāk veidu, cik nepieciešams. Tādā veidā jūs varat viegli strādāt ar sarežģītāku loģiku savās React lietotnēs. Kaut kas, ko varētu būt pārāk grūti racionalizēt, izmantojot useState.

import {useReducer} from 'react';
import './App.css';

const reducer = (state, action) => {
  if (action.type === 'buy_ingredients') return {money: state.money - 10};
  if (action.type === 'sell_a_meal') return {money: state.money +10};
  return state;
}

function App() {

  const initialState = {money: 100};
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div className='App'>
      <h1>Wallet: {state.money}</h1>
<div>
  <button onClick={() => dispatch({type: 'buy_ingredients'})}>Dārzeņu iepirkšana</button>
  <button onClick={() => dispatch({type: 'sell_a_meal'})}>Pārdot maltīti</button>
  </div>  
    </div>
  );
}

export default App;

Lai to izpētītu praksē, pievienosim vēl vienu darbības veidu.

import {useReducer} from 'react';
import './App.css';

const reducer = (state, action) => {
if (action.type === 'buy_ingredients') return {money: state.money - 10};
if (action.type === 'sell_a_meal') return {money: state.money +10};
if (action.type === 'celebrity_visit') return {money: state.money + 5000};
return state;
}

function App() {

const initialState = {money: 100};
const [state, dispatch] = useReducer(reducer, initialState);

return (
<div className='App'>
<h1>Wallet: {state.money}</h1>
<div>
<button onClick={() => dispatch({type: 'buy_ingredients'})}>Dārzeņu iepirkšana</button>
<button onClick={() => dispatch({type: 'sell_a_meal'})}>Pārdot maltīti</button>
<button onClick={() => dispatch({type: 'celebrity_visit'})}>Slavenības apmeklējums</button>
</div>
</div>
);
}

export default App;

Es to nosaukšu par “slavenību apmeklējumu”. Šī darbība jāsāk, kad slavenība apmeklē restorānu, kas restorānā ienes 5000 naudiņas, kad tas notiek. Lai tas darbotos, reduktora funkcijai esmu pievienojis citu darbības veidu un pēc tam citu pogu, lai to aktivizētu. Tas viss darbojas, kā paredzēts. Noklikšķinot uz slavenību apmeklējuma pogas, maka apjoms palielinās par 5000, un tas ir tik vienkārši.

Šajā rakstā jūs uzzinājāt par useReducer hook, kā tas atšķiras no useState hook un kāpēc tas var būt izdevīgs un efektīvāks risinājums noteiktos apstākļos.

Kopsavilkumā:

Kad izvēlēties useReducer vs useState

UseState āķi vislabāk var izmantot mazāk sarežģītiem datiem.

Lai gan, strādājot ar useState, ir iespējams izmantot jebkāda veida datu struktūru, labāk to izmantot ar primitīviem datu veidiem, piemēram, virknēm, skaitļiem vai Būlean vērtībām.

UseReducer āķi vislabāk var izmantot sarežģītākiem datiem, konkrēti, masīviem vai objektiem.

Lai gan šis noteikums ir pietiekami vienkāršs, ir situācijas, kad jūs, iespējams, strādājat ar vienkāršu objektu un tomēr izlemjat izmantot useState āķi.

Šāds lēmums varētu izrietēt no vienkārša fakta, ka darbs ar useState dažkārt var likties vieglāks, nekā domāt par to, kā steits tiek kontrolēts, strādājot ar useReducer.

Tas varētu palīdzēt konceptualizēt šo dilemmu kā pakāpenisku skalu, kuras kreisajā pusē ir useState āķis ar primitīviem datu tipiem un vienkāršiem lietošanas gadījumiem, piemēram, mainīgā ieslēgšana vai izslēgšana.

Šī spektra beigās ir useReducer āķis, ko izmanto, lai kontrolētu lielu steitu saturošu objektu stāvokli.

Šajā spektrā nav skaidra punkta, kurā jūs varētu izlemt: “Ja manam steita objektam ir trīs vai vairāk rekvizītu, es izmantošu useReducer āķi”.

Dažreiz šādam apgalvojumam var būt jēga, bet citreiz tā var nebūt.

Ir svarīgi atcerēties, ka kods ir vienkāršs, lai to saprastu, sadarbotos, veicinātu un veidotu no tā.

Viena no useState negatīvajām īpašībām ir tā, ka to bieži ir grūti uzturēt, jo stāvoklis kļūst sarežģītāks.

No otras puses, useReducer negatīvā īpašība ir tā, ka tas prasa vairāk sagatavošanās darbu. Tomēr, kad šī iestatīšana ir pabeigta, kļūst vieglāk paplašināt kodu, pamatojoties uz jaunajām prasībām ko iespējams kādreiz nākās papildināt.

Secinājums

Jūs uzzinājāt par lēmumu pieņemšanas procesu, izvēloties starp useReducer un useState darbam ar dažāda veida datiem.