Per què React Hooks + Context API és una opció millor que React + Redux

Bloc

Per què React Hooks + Context API és una opció millor que React + Redux

Per què React Hooks + Context API és una opció millor que React + Redux

Redux introdueix molta complexitat a la nostra base de codis amb la quantitat excessiva de codi que requereix. En el millor dels casos, això el converteix en una solució imperfecta per a la gestió d’estats en aplicacions React. Tot i això, hi ha massa desenvolupadors de React per defecte a Redux per a la gestió estatal sense considerar altres alternatives.

En aquest article, presentaré l'API React Context per a la gestió d'estats i us mostraré què fa que React Hooks i l'API Context siguin una solució millor que Redux.

Per què necessitem una eina de gestió estatal

A React típic, la manera de gestionar les dades entre components desconnectats es fa mitjançant la perforació de l’hélice. Com que no hi ha cap estat global al qual puguin accedir els components si, per exemple, voleu passar dades d'un component de nivell superior a un component de cinquè nivell, haureu de passar les dades com a puntal a cada nivell de l'arbre fins arribar al component desitjat.

Això es tradueix en escriure un munt de codi addicional i donar propietats als components que mai no faran servir també afecta el seu disseny arquitectònic. Per resoldre aquest problema, necessitàvem una manera de proporcionar un estat global al qual poguessin accedir tots els components, per molt profundes que estiguessin.

En solucionar-ho, Redux, una biblioteca JavaScript de codi obert per gestionar l’estat de l’aplicació, es va convertir en la solució bàsica per als desenvolupadors de React.

Com funciona Redux

El Documentació de redux el descriu com un contenidor d'estats previsible per a aplicacions JavaScript que ens ajuda a escriure aplicacions que es comporten de manera constant, s'executen en entorns diferents i són fàcils de provar.

Un desavantatge de la perforació de prop és la necessitat d’escriure una quantitat considerable de codi addicional per accedir a les dades des d’un component de nivell superior. Amb Redux, aquest desavantatge es nota encara més, ja que comporta molta complexitat amb tot el codi addicional necessari per configurar un estat global per a la nostra aplicació. Redux requereix tres parts principals de la construcció per funcionar: accions, reductors i emmagatzematge.

codi de televisió com netflix

Accions

Són objectes que s’utilitzen per enviar dades al magatzem Redux. Normalment tenen dues propietats: una propietat tipus per descriure què fa l'acció i una propietat de càrrega útil que conté la informació que s'hauria de canviar a l'estat de l'aplicació.

// action.js const reduxAction = payload => { return { type: 'action description', payload } }; export default reduxAction;

El type sol estar en majúscules, amb les paraules separades per guions baixos. Per exemple, SIGNUP_USER o DELETE_USER_DATA.

Reductors

Són funcions pures que implementen el comportament d'acció. Prenen l'estat actual de l'aplicació, realitzen una acció i, després, tornen un estat nou:

const reducer = (state, action) => { const { type, payload } = action; switch(type){ case 'action type': return { ['action description']: payload }; default: return state; } }; export default reducer;

Botiga

La botiga és on es troba l’estat de l’aplicació. Només hi ha una botiga en qualsevol aplicació de Redux:

import { createStore } from 'redux' const store = createStore(componentName);

Com que la nostra aplicació només pot tenir un magatzem Redux, per tal de crear un reductor d'arrel únic per a tots els nostres components, necessitarem el [combineReducers](https://redux.js.org/api/combinereducers) mètode de Redux.

Amb aquest llarg procés i una quantitat considerable de codi necessària per configurar Redux, imagineu-vos com serà la nostra base de codis quan tinguem diversos components per treballar. Tot i que Redux resol el nostre problema de gestió d’estats, és molt lent d’utilitzar, té una corba d’aprenentatge difícil i introdueix una nova capa de complexitat a la nostra aplicació.

Afortunadament, l’API React Context resol aquest problema. Quan es combina amb React Hooks, tenim una solució de gestió d’estats que requereix menys temps per configurar-la, té una corba d’aprenentatge fàcil i requereix un codi mínim.

L’API React Context

La nova API de context va venir amb React 16.3. A continuació s’explica el context a Reacciona la documentació :

El context proporciona una manera de passar dades per l’arbre de components sense haver de passar manualment els accessoris a tots els nivells.

L’API context React és la manera de gestionar l’estat de React en diversos components que no estan connectats directament.

Per crear un context, utilitzarem el createContext mètode de React, que accepta un paràmetre pel seu valor per defecte:

import React from 'react'; const newContext = React.createContext({ color: 'black' });

El createContext torna un objecte amb un Provider i un Consumer component:

const { Provider, Consumer } = newContext;

El Provider El component és el que fa que l'estat estigui disponible per a tots els components fills, per molt profunds que estiguin dins de la jerarquia dels components. El Provider el component rep un value prop. Aquí és on passarem el nostre valor actual:

{children}

El Consumer, com el seu nom indica, consumeix les dades del Provider sense necessitat de perforació de puntal:

{value => {value}}}

Sense Hooks, l'API Context podria no semblar gaire en comparació amb Redux, sinó combinada amb el useReducer Hook, tenim una solució que finalment resol el problema de gestió estatal.

Què són els ganxos de React?

Els ganxos són un tipus de funció que permet l'execució de codi personalitzat en un codi base. A React, els ganxos són funcions especials que ens permeten connectar-nos a les seves característiques bàsiques.

React Hooks proporciona una alternativa a l’escriptura de components basats en classes, ja que ens permet gestionar fàcilment la gestió d’estats a partir de components funcionals.

El useContext Ganxo

Si us n’heu adonat, a l’hora d’explicar l’API React Context, calia embolicar el nostre contingut en un Consumer component i després passar una funció com a nen perquè puguem accedir (o consumir) al nostre estat. Això introdueix la nidificació de components innecessaris i augmenta la complexitat del nostre codi.

El useContext Hook fa les coses molt més boniques i senzilles. Per accedir al nostre estat utilitzant-lo, tot el que hem de fer és trucar-lo amb el nostre context creat com a argument:

botó de desactivació de reacció després de fer clic
const newContext = React.createContext({ color: 'black' }); const value = useContext(newContext); console.log(value); // this will return { color: 'black' }

Ara, en lloc d’embolicar el nostre contingut en un Consumer component, podem simplement accedir al nostre estat a través del value variable.

El useReducer Ganxo

El useReducer Hook va arribar amb React 16.7.0. Igual que el reduce() mètode a JavaScript, el useReducer Hook rep dos valors com a argument (en aquest cas, l’estat actual i una acció) i després retorna un estat nou:

const [state, dispatch] = useReducer((state, action) => { const { type } = action; switch(action) { case 'action description': const newState = // do something with the action return newState; default: throw new Error() } }, []);

Al bloc anterior, hem definit el nostre estat i el mètode corresponent, dispatch, per gestionar-lo. Quan anomenem el dispatch mètode, el useReducer() Hook realitzarà una acció basada en type que rep el nostre mètode en el seu argument d'acció:

... return ( dispatch({ type: 'action type'})}> )

El useReducer Hook més l'API de context

Instal·lació de la nostra botiga

Ara que ja sabem com funcionen les API de context i useReducer Hook treballa de manera individual, a veure què passa quan els combinem per obtenir la solució de gestió d’estat global ideal per a la nostra aplicació. Crearem el nostre estat global en un store.js dossier:

// store.js import React, {createContext, useReducer} from 'react'; const initialState = {}; const store = createContext(initialState); const { Provider } = store; const StateProvider = ( { children } ) => { const [state, dispatch] = useReducer((state, action) => { switch(action.type) { case 'action description': const newState = // do something with the action return newState; default: throw new Error(); }; }, initialState); return {children}; }; export { store, StateProvider }

Al nostre store.js fitxer, hem utilitzat el createContext() mètode de React que hem explicat anteriorment per crear un context nou. Recordeu que el createContext() torna un objecte amb un Provider i Consumer component. Aquesta vegada, farem servir només el Provider component i després el useContext Enganxa quan necessitem accedir al nostre estat.

Fixeu-vos en com hem utilitzat el useReducer Enganxa al nostre StateProvider. Quan necessitem manipular el nostre estat, trucarem al dispatch mètode i passar en un objecte amb el type desitjat com a argument.

Al nostre StateProvider, vam retornar el nostre Provider component amb un value puntal de state i dispatch del useReducer Ganxo.

Accedir al nostre estat a nivell mundial

Per accedir al nostre estat a nivell mundial, haurem d’ajustar la nostra arrel component del nostre StoreProvider abans de representar-lo al nostre ReactDOM.render() funció:

// root index.js file import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { StateProvider } from './store.js'; const app = ( ); ReactDOM.render(app, document.getElementById('root'));

Ara, la nostra botiga context es pot accedir des de qualsevol component de l’arbre de components. Per fer-ho, importarem el useContext Ganxo de react i el store del nostre ./store.js dossier:

// exampleComponent.js import React, { useContext } from 'react'; import { store } from './store.js'; const ExampleComponent = () => { const globalState = useContext(store); console.log(globalState); // this will return { color: red } };

Afegir i eliminar dades del nostre estat

Hem vist com podem accedir al nostre estat global. Per afegir i eliminar dades del nostre estat, necessitarem el dispatch mètode del nostre store context. Només ens cal trucar al dispatch mètode i passar en un objecte amb type (la descripció de l'acció definida al nostre component StateProvider) com a paràmetre:

exemple de botó de reacció nativa
// exampleComponent.js import React, { useContext } from 'react'; import { store } from './store.js'; const ExampleComponent = () => { const globalState = useContext(store); const { dispatch } = globalState; dispatch({ type: 'action description' }) };

Conclusió

En bona mesura, Redux funciona per a la gestió d’estats a les aplicacions React i té alguns avantatges, però la seva detallesa fa que sigui realment difícil d’aconseguir i la quantitat de codi addicional necessària perquè funcioni a la nostra aplicació introdueix una complexitat innecessària .

D’altra banda, amb el useContext API i React Hooks, no cal instal·lar biblioteques externes ni afegir un munt de fitxers i carpetes per fer funcionar la nostra aplicació. Això fa que sigui una manera molt més senzilla i senzilla de gestionar la gestió global de l’estat a les aplicacions React.

#Redux #React #JavaScript #WebDev