PRESTANI SLIJEPO KORISTITI Redux!
Kao lijen programer — nisam se kupio na to. Osjećao sam da je korištenje zadane stanja i konteksta daleko bolje. Bilo je previše šablonskog koda u Reduxu i odvajanje odgovornosti, iako valjano, moglo se jednako lako postići koristeći prilagođeni hook. Također smo koristili redux-saga za interakciju s backendima. Što se meni činilo kao još jedan nepotreban teret.
Ali sam bio na početku karijere — pa sam pomislio da bih mu trebao dati poštenu priliku. Koristio sam redux i redux-saga oko godinu dana. I moji argumenti protiv toga su se samo pojačali. Neprestano sam pitao — zašto koristimo redux, a moji stariji kolege su mi dali odgovore poput —
- Čini kod testljivijim
- Odvaja poslovnu logiku od logike komponente
- Preporučuje se ne koristiti useState za kompleksne tipove podataka (kao što su objekti ili nizovi objekata)
- redux-saga vam može dati više kontrole nad stanjem API-ja
- Mogu koristiti kontekst, ali u koliko će kontekstnih providera umotati svoju aplikaciju?
Na sve to sam imao odgovore, ali nisu bili super-uvjerljivi. Mislim, redux je redux — koriste ga milijuni programera i velike kompanije — a ja sam bio samo junior inženjer softvera frustriran šablonskim kodom.
Sada, nakon rada kao Team Lead, mogu sa sigurnošću reći, svi moji stariji kolege su bili u krivu — i sami bi se složili. Razlog zašto pišem ovaj članak je što čak i danas ima toliko mnogo tvrtki koje koriste redux i prihvaćaju ga kao slijepi standard. Trebamo stati i pogledati alternative koje imamo!
Za početak, razmotrimo problem koji imam s reduxom jasnije. Evo količine koda koju bismo trebali napisati za jednostavno stanje brojanja koristeći redux. Očito, ovo je samo primjer — ne pokazuje pravu aplikaciju, ali je prilično učinkovit.
// src/actionConstants.js
const ACTION_CONSTANTS = {
INCREMENT_COUNT: "INCREMENT_COUNT",
DECREMENT_COUNT: "DECREMENT_COUNT",
RESET_COUNT: "RESET_COUNT"
}
// src/store/countStore/reducer.js
const initialState = { count: 0 }
export const countReducer = (state = initialState, action) => {
switch (action.type){
case ACTION_CONSTANTS.INCREMENT_COUNT:
return { count: state.count + 1 };
case ACTION_CONSTANTS.DECREMENT_COUNT:
return { count: state.count - 1 };
case ACTION_CONSTANTS.RESET_COUNT:
return initialState;
}
}
// src/store/countStore/selectors.js
export const useCountReducer = () => {
return useSelector(store => store.countReducer)
}
// src/store/countStore/actions.js
export const incrementCount = () => ({
type: ACTION_CONSTANTS.INCREMENT_COUNT
})
export const decrementCount = () => ({
type: ACTION_CONSTANTS.DECREMENT_COUNT
})
export const resetCount = () => ({
type: ACTION_CONSTANTS.RESET_COUNT
})
// src/store/index.js
const rootReducer = combineReducers({ countReducer: countReducer, ... });
Nije li to jednostavno criminalno? Ovo ne uzima u obzir kod koji ide u vašu sagu ili thunk pri interakciji s backendom — ovo je samo za redovnu dijeljenu varijablu stanja — brojanje. Zamislite količinu problema kroz koje trebate proći samo da napravite manju izmjenu u logici — skokomiceći s jedne datoteke na drugu i osiguravajući da su te promjene konzistentne u datotekama.
Redux je namijenjen biti globalna spremišta. Trebao bi se koristiti za dijeljenje stanja u svim komponentama u vašoj aplikaciji. Ali problem je što se, kada tvrtke počnu koristiti redux, oni imaju tendenciju pohraniti svo svoje stanje API-ja (koje se 'možda' trebalo dijeliti u budućnosti) koristeći redux. To ima smisla za projekt gdje će raditi mnogo ljudi — i želite imati jedan konzistentan način pisanja koda. Međutim, povećava veličinu koda i drastično smanjuje njegovu održivost.
Iako su uveli redux-toolkit i to čini kod malo čistijim — to se i dalje ne može usporediti s mnogim drugim bibliotekama koje bi obavile posao na mnogo bolje. Evo stack-a koji koristimo na My Next Developer:
React-Query: Koristim react-query za upravljanje svim stanjem API-ja u mojim aplikacijama. Interno upravlja stanjem učitavanja, greške i uspjeha za sve API pozive, keširuje rezultate kako bi se izbjeglo ponovno dohvaćanje i čini super lako pristupiti podacima u više komponenti. Ovo je prekrasan alat — jednom kada ga koristiš, obećavam da se nećeš vratiti. Jednostavna dokumentacija i implementacija temeljeno na hook-ovima čini je vrlo čistom. Evo popularne YouTube playlistice od React Query Tutorial za početnike od Codevolution kako bi naučio react-query.
Kontekst: Postoji vrlo malo slučajeva gdje imamo globalno stanje koje nije temeljeno na API-ju koje se trebalo dijeliti u više komponenti. U tim rijetkim slučajevima, kontekst je najjednostavnije za implementaciju. Također nepotrebno ne dodaje drugu biblioteku u kombinaciju.
Ne slažeš se? Voljela bih čuti tvoje misli!
