Flux Architecture:
Flux es una arquitectura que Facebook usa internamente cuando opera con React.
No es un marco o una biblioteca.
Es simplemente un reemplazo de una arquitectura que mejora React y también la idea del flujo de datos unidireccional.
Redux es un contenedor de estado predecible para aplicaciones de JavaScript. Redux es una herramienta de administración de estado que se usa principalmente para reaccionar. Ahora hablando en términos de React, las aplicaciones simples tienen algunos componentes y el componente principal que actúa como líder para el estado de nuestra aplicación. Cualquier cambio realizado se refleja en el componente principal que luego modifica el estado.
Pero en realidad, al crear una aplicación web para resolver un problema del mundo real, nos encontramos con cientos de componentes que están organizados en varios grupos en lugar de un grupo con un componente principal. Por lo tanto, están organizados en múltiples grupos en los que cada grupo tiene un componente principal que administra el estado de ese grupo.
Ahora, si realiza cambios en uno de los componentes, es posible que sea necesario volver a renderizar uno de los otros componentes, pero si no comparten un componente principal común, puede ser difícil pasar información entre ellos.
Aquí es donde necesitamos un modelo MVC (Modelo, Vista, Controlador) para la aplicación.
- Modelo MVC: un modelo MVC básicamente captura todo el estado de la aplicación y cualquier cambio que desee realizar en el modelo desde la vista tendrá que pasar por el controlador hasta el modelo.
Necesidad de arquitectura Flux:
MVC enfrentó ciertos problemas debido a los cuales no pudo administrar la aplicación de la manera que queríamos. Ahí es donde se diseñó un nuevo enfoque llamado arquitectura Flux que se originó a partir del modelo MVC. Este enfoque fue diseñado básicamente para organizar su código en una web más simple. Los problemas que se encontraron con MVC fueron el hecho de que las actualizaciones conducen a un flujo en cascada de actualizaciones dentro de los modelos, y esto se convierte en una red enredada, lo que hace que la aplicación sea realmente compleja.
La arquitectura flux, sin embargo, proporciona un flujo unidireccional en el que una unidad central para toda la aplicación se denomina almacén. En la arquitectura Flux, puede tener varias tiendas. Una tienda básicamente actúa como un almacén para el estado de la aplicación. Entonces, solo puede modificar el estado de su aplicación solicitando la tienda.
El despachador se convierte en una unidad de control para serializar las acciones que se solicitan para el cambio de tienda. La tienda se puede suscribir por vistas, ya sean vistas de React o vistas de controlador.
El almacén del estado es el componente principal que obtendrá su estado del almacén de la arquitectura de flujo. Ahora, cada vez que se realiza un cambio, las vistas del controlador retroceden y pueden obtener el estado actualizado.
Y esto, a su vez, podría dar como resultado que se vuelvan a renderizar algunas partes de sus vistas o algunas partes de sus componentes dentro de su aplicación. Entonces, esto es lo que significa el flujo unidireccional de datos que forma la base de la arquitectura Flux.
Arquitectura Redux:
Redux es un contenedor de estado predecible para aplicaciones de JavaScript. Redux deriva sus ideas de la arquitectura Flux. Es básicamente un enfoque similar a un flujo para las aplicaciones React.
Redux no necesariamente tiene que usarse solo con React, también puede usarlo para AngularJS o JS. Pero Redux funciona muy bien con React. Redux básicamente proporciona una forma de administrar la tienda, el flujo de datos unidireccional y mucho más.
La arquitectura Flux tiene múltiples tiendas que el despachador coordina juntas y cuando hay un cambio, todas las tiendas necesitan actualizarse. Pero en Redux tenemos una sola tienda. Una sola tienda que maneja toda la aplicación. Cualquier cambio en la tienda se realiza a través de acciones.
Ahora, en Redux tenemos algunas funciones que se llaman funciones reductoras. Estas funciones básicamente toman el estado anterior de la aplicación y la acción especificada y generan el siguiente estado para la aplicación. En Redux, los cambios en el estado solo se pueden realizar utilizando estas funciones reductoras. El estado anterior sigue intacto y se genera un nuevo estado a partir del anterior.
Uso de Redux:
- Depuración de viajes en el tiempo: en Redux, siempre puede regresar y verificar los cambios que ha realizado en los estados. Fácil registro de estados.
- Deshacer y rehacer: mientras camina hacia atrás, siempre puede actualizar/modificar los estados según lo requiera.
- Una sola fuente: Redux tiene una sola tienda, lo que lo hace realmente fácil de entender.
- Funciones reductoras: estas funciones generan un nuevo estado que se origina a partir del estado anterior y, por lo tanto, ayuda a vincular todos los estados.
- Uso de JS: En la función reducer junto con el estado anterior se especifica la acción. La acción se compone de un objeto JavaScript básico que se denomina carga útil.
- inmutabilidad: cuando se genera un nuevo estado, el estado anterior permanece como está y no se modifica de ninguna manera.
Redux se integra junto con React usando un modelo llamado react-redux . Ahora, para esta integración, usamos el paquete react-redux . Pero aquí cubriremos solo Redux. Entonces, como primer paso, debe instalar redux en su aplicación React:
npm install redux --save
O
yarn add redux
Ejemplos:
import {
createStore
}
from 'redux'
function count(state = 0, action) {
switch (action.type) {
case 'INCR':
return state + 1
case 'DECR':
return state - 1
default:
return state
}
}
let sample_store = createStore(count)
sample_store.subscribe(() => console.log(sample_store.getState()))
sample_store.dispatch({
type: 'INCR'
}) //Output:1
sample_store.dispatch({
type: 'INCR'
}) //Output:2
sample_store.dispatch({
type: 'DECR'
}) //Output:1