ReactJS es una biblioteca que permite a los desarrolladores renderizar y actualizar vistas. Cuando entró en escena, su novedad fue su capacidad para comparar eficientemente las diferencias entre dos árboles DOM virtuales. Esto permitió a los desarrolladores volver a representar aplicaciones completas cada vez que se producía una actualización, en lugar de volver a representar manualmente los componentes individuales.
Esta mayor eficiencia hizo posible que grandes aplicaciones almacenen un solo estado de aplicación, actualicen y luego vuelvan a procesar todo según el estado actualizado de la aplicación.
Por ejemplo, el estado completo de una aplicación para una tarea pendiente puede verse así:
const initialState = {
título: ‘¡Mis todos!’,
artículos: [
‘Terminar este artículo’,
‘Hacer otro artículo’,
‘Publica sobre esto en Quora’,
],
};
Representar este estado con ReactJS se vería más o menos así:
La aplicación de clase extiende React.Component {
constructor (accesorios) {
super (accesorios);
this.state = props.initialState;
}
handleTitleUpdate = (evento) => {
this.setState ({
…este estado,
título: event.target.value,
});
};
render () {
const {title, items} = this.state;
regreso (
{items.map (item => (
- {item}
)}
);
}
}
Reaccionar.
,
document.getElementById (‘aplicación’)
);
Esta nueva forma de escribir aplicaciones Javascript, al tiempo que simplifica algunas complejidades antiguas, también introdujo algunas nuevas: a saber, cómo actualizar el estado compartido entre múltiples componentes. El enfoque ingenuo de los eventos de cambio burbujeante a un antepasado común rápidamente demostró ser insostenible. Después de haber encontrado este problema, Facebook lanzó un enfoque de diseño inicial llamado Flux, que finalmente fue reemplazado por una biblioteca llamada Redux.
Redux almacena y actualiza el estado requerido para representar una aplicación completa. Para ello, calcula el siguiente estado de la aplicación a través de una función que acepta el estado actual y un objeto que representa una acción. Esta función, llamada reductor, podría verse así para nuestra aplicación Tareas pendientes:
const reducer = (state = initialState, action) => {
switch (action.type) {
case ‘update_title’:
return {… estado, título: action.payload};
defecto:
estado de retorno;
}
};
Dado que Redux es un concepto tan simple, podemos recrear una versión simple para fines ilustrativos:
let currentState = initialState;
dejar oyentes = [];
const getState = () => currentState;
despacho const = (acción) => {
currentState = reductor (getState (), acción);
// ¡Deje que todos los componentes sepan que tenemos un nuevo estado!
for (let i = 0; i oyentes [i] ();
}
}
const subscribe = (oyente) => listeners.push (oyente);
const store = {
getState,
envío,
suscribir,
};
Actualizar la aplicación de esta manera nos permite reescribir nuestra aplicación Tareas pendientes de la siguiente manera:
La aplicación de clase extiende React.Component {
constructor (accesorios) {
super (accesorios);
this.state = props.store.getState ();
}
componentDidMount () {
this.props.store.subscribe (() => {
this.setState (this.props.store.getState ());
});
}
handleTitleUpdate = (evento) => {
this.props.store.dispatch ({
tipo: ‘update_title’,
carga útil: event.target.value,
});
};
render () {
const {title, items} = this.state;
regreso (
{items.map (item => (
- {item}
)}
);
}
}
Reaccionar.
,
document.getElementById (‘aplicación’)
);
Este cambio aparentemente pequeño en nuestra aplicación esencialmente mueve el almacenamiento de estado fuera del componente React. Una vez que hacemos esto, es posible compartir el estado de la aplicación con otros componentes, y es posible que otros componentes actualicen el estado de la aplicación (enviando una acción).
Si imagina que pasamos “almacenar” a todos los componentes de nuestra aplicación, entonces todos los componentes pueden simplemente llamar a “store.dispatch (…)” para actualizar todos los demás componentes de la aplicación. Básicamente, hemos creado e integrado una versión cruda de Redux en nuestra aplicación React. Las versiones reales de Redux y React-Redux ocultan gran parte del código adicional que tuvimos que escribir, como pasar la tienda a cada componente.
En resumen:
- React eficientemente renderiza y actualiza grandes vistas HTML.
- Redux almacena y actualiza el estado utilizado para representar una aplicación.
(Descargo de responsabilidad: no he probado ninguno de este código. El código falso de Redux tampoco limpia a los oyentes, así que por favor no lo use. Utilice la biblioteca real de Redux en su lugar. Es mucho mejor).
