PŘESTAŇTE slepě používat Redux!
Jako líný vývojář — nevěřil jsem tomu. Měl jsem pocit, že používání výchozího stavu a kontextu bylo mnohem lepší. V Reduxu bylo příliš mnoho boilerplate kódu a separace zájmů, ačkoli platná, mohla být stejně snadno dosažena pomocí vlastního hook. Používali jsme také redux-saga pro interakci s backendem. Což se mi zdálo jako další zbytečně vysoká zátěž.
Ale začínal jsem svou kariéru — tak jsem si myslel, že bych mu měl dát poctivou šanci. Používal jsem redux a redux-saga přibližně rok. A mé argumenty proti tomu se jen posilují. Stále jsem si kladl otázku — proč používáme redux, a mí senioři mi dali odpovědi jako —
- Činí kód více testovatelným
- Odděluje obchodní logiku od logiky komponenty
- Doporučuje se nepoužívat useState pro složité datové typy (jako objekty nebo pole objektů)
- redux-saga vám může dát větší kontrolu nad stavem API
- Mohl byste použít kontext, ale kolik poskytovatelem kontextu zabalíte vaši aplikaci?
Na všechny tyto otázky jsem měl odpovědi, ale ne příliš přesvědčivé. Myslím, že redux byl redux — používaný miliony vývojářů a velkými společnostmi — a já jsem byl jen junior softwareový inženýr s frustrací z boilerplate kódu.
Nyní, poté co jsem pracoval jako vedoucí týmu, mohu sebevědomě říci, že všichni mí senioři se mýlili — a oni by s tím souhlasili. Mým důvodem pro psaní tohoto článku je, že i dnes existuje tolik společností, které používají redux a přijímají ho jako slepý standard. Musíme se zastavit a podívat se na alternativy, které máme!
Abychom začali, pojďme si jasněji pochopit problém, který mám s reduxem. Zde je množství kódu, který bychom museli napsat pro jednoduchý stav počtu pomocí reduxu. Samozřejmě je to jen příklad — nevztahuje se na skutečnou aplikaci, ale je to dost účinné.
// 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, ... });
Není to jen kriminální? To stále nezohledňuje kód, který jde do vaší sagi nebo thunku při interakci s backendem — to je jen pro běžně sdílený stavový proměnnou — počet. Představte si, kolik potíží musíte projít jen abyste provedli malou změnu logiky — skákat z jednoho souboru do druhého a ujistit se, že tyto změny jsou konzistentní v souborech.
Redux má být globální úložiště. Měl by se používat ke sdílení stavu ve všech komponentách vaší aplikace. Problém je však v tom, že když společnosti začnou Redux používat, mají tendenci ukládat všechny své stavy API (které se „mohou" v budoucnu sdílet) pomocí Reduxu. To má smysl pro projekt, kde bude pracovat mnoho lidí — a chcete mít jeden konzistentní způsob psaní kódu. Avšak to zvyšuje velikost kódu a drasticky snižuje jeho udržovatelnost.
Ačkoli zavedli redux-toolkit a který trošku vyčistí kód — stále se to nedá srovnat s mnoha dalšími knihovnami, které vám pomohou udělat práci mnohem lépe. Zde je standardní stack, který používáme v MyNextDeveloper:
React-Query: Používám react-query ke správě všech stavů API v mých aplikacích. Interně spravuje stavy načítání, chyby a úspěchu pro všechna volání API, cachuje výsledky, aby se zabránilo opětovnému načítání, a usnadňuje přístup k datům v rámci více komponent. Toto je krásný nástroj — jakmile ho použijete, slibuji vám, že se nevrátíte. Jednoduchá dokumentace a implementace na bázi hooks ji činí velmi čistou. Zde je oblíbený seznam přehrávání na YouTube React Query Tutorial for Beginners od Codevolution pro učení se react-query.
Context: Existuje jen velmi málo případů, kdy máme neglobální stavem stav založený na API, který musí být sdílen v rámci více komponent. V těch několika málo případech je kontext nejjednodušší k implementaci. Také zbytečně nepřidává do mixu další knihovnu.
Nesouhlasíte? Rád bych slyšel vaše myšlenky!
