Redux es un contenedor predecible del estado de aplicaciones JavaScript.
Te ayuda a escribir aplicaciones que se comportan de manera consistente, corren en distintos ambientes (cliente, servidor y nativo), y son fáciles de probar. Además de eso, provee una gran experiencia de desarrollo, gracias a edición en vivo combinado con un depurador sobre una línea de tiempo.
Puedes usar Redux combinado con React, o cual cualquier otra librería de vistas. Es muy pequeño (2kB) y no tiene dependencias.
Aprende Redux con su creador (en inglés): Getting Started with Redux (30 vídeos gratuitos)
Testimonios
“Love what you’re doing with Redux” Jing Chen, creador de Flux
“I asked for comments on Redux in FB's internal JS discussion group, and it was universally praised. Really awesome work.” Bill Fisher, author of Flux document Bill Fisher, autor de la documentación de Flux
“It's cool that you are inventing a better Flux by not doing Flux at all.” André Staltz, creador de Cycle
Experiencia de desarrollo
Escribí Redux mientras trabajaba en mi charla de React Europe llamada "Hot Reloading with Time Travel". Mi meta era crear una librería de manejo de estado con una API mínima, pero completamente predecible, de forma que fuese posible implementar logging, hot reloading, time travel, aplicaciones universales/isomórficas, grabar y repetir.
Influencias
Redux evoluciona las ideas de Flux, pero evitando su complejidad tomando cosas de Elm.
Ya sea que los hayas usado o no, solo toma unos minutos para empezar a usar Redux.
Instalación
Para instalar la versión estable:
npm i -S redux
Normalmente también vas a querer usar la conexión a React y las herramientas de desarrollo.
npm i -S react-redux
npm i -D redux-devtools
Esto asumiendo que estás usando npm como administrador de paquetes con un empaquetador de módulos como Webpack o Browserify para usar módulos de CommonJS.
Si todavía no usas npm o algún empaquetador de módulos moderno, quizás prefieras el paquete en UMD que define Redux como un objeto global, puedes usar una desde cdnjs. No recomendamos este enfoque para ninguna aplicación seria, ya que la mayoría de las librerías complementarias a Redux está solo disponibles en npm.
El Gist
Todo el estado de tu aplicación esta almacenado en un único árbol dentro de un único store. La única forma de cambiar el árbol de estado es emitiendo una acción, un objeto describiendo que ocurrió.
Para especificar como las acciones transforman el árbol de estado, usas reducers puros.
¡Eso es todo!
import { createStore } from 'redux';
/**
* Esto es un reducer, una función pura con el formato
* (state, action) => newState. Describe como una acción transforma el estado
* en el nuevo estado.
*
* La forma del estado depende de tí: puede ser un primitivo, un array, un
* objeto, o incluso una estructura de datos de Immutable.js. La única parte
* importante es que no debes modificar el objeto del estado, en vez de eso
* devolver una nuevo objeto si el estado cambió.
*
* En este ejemplo, usamos `switch` y strings, pero puedes usar cualquier forma
* que desees si tiene sentido para tu proyecto.
*/
function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}
// Creamos un store de Redux almacenando el estado de la aplicación.
// Su API es { subscribe, dispatch, getState }.
let store = createStore(counter);
// Puedes suscribirte manualmente a los cambios, o conectar tu vista
// directamente
store.subscribe(() => {
console.log(store.getState())
});
// La única forma de modificar el estado interno es despachando acciones.
// Las acciones pueden ser serializadas, registradas o almacenadas luego para
// volver a ejecutarlas.
store.dispatch({ type: 'INCREMENT' });
// 1
store.dispatch({ type: 'INCREMENT' });
// 2
store.dispatch({ type: 'DECREMENT' });
// 1
En vez de modificar el estado directamente, especificas las modificaciones que quieres que ocurran con objetos planos llamados acciones. Entonces escribes una función especial llamada reducer que decide como cada acción transforma el estado de la aplicación.
Si vienes de Flux, hay una única diferencia importante que necesitas entender. Redux no tiene Dispatcher o soporta múltiples stores. En cambio, hay un único store con una única función reductora. Cuando tu aplicación crezca, en vez de agregar más stores, divides tu reducer principal en varios reducers pequeños que operan de forma independiente en distintas partes del árbol de estado. Esto es exactamente como si solo hubiese un componente principal en una aplicación de React, pero esta compuesta de muchos componentes pequeños.
Esta arquitectura puede parecer una exageración para una aplicación de contador, pero lo hermoso de este patrón es los bien que escala en aplicaciones grandes y complejas. También permite herramientas de desarrollo muy poderosas, ya que es posible registrar cada modificación que las acciones causan. Podrías registrar la sesión de un usuario y reproducirlas simplemente ejecutando las mismas acciones.
Aprende Redux con su Creador (en inglés)
Getting Started with Redux es un curso de 30 vídeos explicados por Dan Abramov, autor de Redux. Esta diseñado para complementar las partes "Básicas" de la documentación mientras incluye ideas adicionales sobre inmutabilidad, pruebas, buenas prácticas de Redux, y como usar Redux con React. Este curso es gratuito y siempre lo va a ser.
“Great course on egghead.io by @dan_abramov - instead of just showing you how to use #redux, it also shows how and why redux was built!” Sandrino Di Mattia
“Plowing through @dan_abramov 'Getting Started with Redux' - its amazing how much simpler concepts get with video.” Chris Dhanaraj
“This video series on Redux by @dan_abramov on @eggheadio is spectacular!” Eddie Zaneski
“This series of videos on Redux by @dan_abramov is repeatedly blowing my mind - gunna do some serious refactoring” Laurence Roberts
Así que ¿Qué estas esperando?
¡Mira los 30 vídeos gratuitos!
Sí te gustó el curso, considera apoyar a Egghead comprando una suscripción. Los suscriptores tienen acceso al código fuente de los ejemplos en cada uno los vídeos, así como un montón de lecciones avanzadas en otros temas, incluyendo JavaScript en profundidad, React, Angular, y más. Muchos profesores de Egghead son también autores de librerías de código abierto, así que comprar una suscripción es una buena forma de ayudarlos por todo el trabajo que hicieron.
Documentación
Ejemplos
Si eres nuevo en el ecosistema de NPM y tienes problemas iniciando un proyecto, o no estas seguro de donde pegar el gist de arriba, revisa simples-redux-example que usa Redux junto a React y Browserify.
Discusiones
Únete al canal #redux de la comunidad en Discord Reactiflux.
Agradecimientos
- The Elm Architecture por una gran introducción al modelo de actualización de estado con reducers;
- Turning the database inside-out por explotarme la mente;
- Developing ClojureScript with Figwheel por convencerme que la re-evaluaciǿn debe "simplemente funcionar";
- Webpack por Hot Module Replacement;
- Flummox por enseñarme un enfoque a Flux sin boilerplate or singletons;
- disto por la prueba de concepto de hot reloadable Stores;
- NuclearJS por probar que esta arquitectua puede tener buen rendimiento;
- Om por popularizar la idea de un único Store;
- Cycle por demostrar que tan común una función puede ser la mejor herramienta;
- React por la innovación pragmática.
Agradecimientos especiales a Jamie Paton por liberar redux como nombre de módulo en NPM.
Registro de cambios
Este proyecto se adhiere al Versionamiento Semántico.
Cada lanzamiento, junto a sus instrucciones de migración, están documentados en la página de Github de Lanzamientos.
Patrocinadores
El trabajo con Redux fue financiado por la comunidad.
Algunos de las compañías más destacadas que hicieron esto posible:
Ve la lista completa de patrocinadores de Redux.
Licencia
MIT