PDF de programación - Redux en español

Redux en español

Tabla de contenido

1. Read Me
2. Introducción

i. Motivación
ii. Tres Principios
iii. Herencia
iv. Ecosistema
v. Ejemplos

3. Básico

i. Acciones
ii. Reducers
iii. Store
iv. Flujo de datos
v. Uso con React
vi. Ejemplo: Lista de TODOs

4. Avanzado

i. Acciones asíncronas
ii. Flujo asíncrono
iii. Middleware
iv. Uso con React Router
v. Ejemplo: API Reddit
vi. Siguientes pasos

5. Recetas

i. Migrando a Redux
ii. Usando el operador Spread en objetos
iii. Reduciendo el Boilerplate
iv. Render en el Servidor
v. Escribiendo pruebas
vi. Calculando Datos Obtenidos
vii. Implementando Deshacer
viii. Aislando subaplicaciones
ix. Estructurando reducers

i. Conceptos prerequeridos
ii. Estructuras básica de reducers
iii. Separando lógica de reducers
iv. Ejemplo: Refactorizando reducers
v. Usando `combineReducers`

1

Redux en español

vi. Más allá de `combineReducers`
vii. Normalizando la forma del estado
viii. Actualizando datos normalizados
ix. Reusando lógica en reducers
x. Patrones de actualización inmutables
xi. Inicializando el estado

6. FAQ

i. General
ii. Reducers
iii. Organizando el estado
iv. Configurando el Store
v. Acciones
vi. Estructura de código
vii. Rendimiento
viii. React Redux
ix. Misceláneo

7. Solución de problemas
8. Glosario
9. Referencia API
i. createStore
ii. Store
iii. combineReducers
iv. applyMiddleware
v. bindActionCreators
vi. compose

10. Registro de cambios
11. Patrocinadores
12. Feedback

2

Redux en español

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.

Read Me

3

Redux en español

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 estas 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, capaz prefiera 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':

Read Me

4

Redux en español

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 quieras que
ocurren 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 los
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

Read Me

5

Redux en español

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

“Come for the name hype. Stay for the rock solid fundamentals. (Thanks, and great job
@dan_abramov and @eggheadio!)” Dan

“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í se gusto el curso, considera soportar a Egghead comprando una suscripción. Los
suscriptos tiene acceso al código fuentes de los ejemplos en cada uno los vídeos, así como
un montón de lecciones avanzados en otros temas, incluyendo JavaScript en profundidad,
React, Angular, y más. Muchas profesores de Egghead son también autores de librerías de
código abierto, así que comprando una suscripción es una buena forma de ayudarlos por
todo el trabajo que hicieron.

Documentación

Introducción
Básico
Avanzado
Recetas
Solución de problemas
Glosario
Referencia API

Ejemplos

Contador

Read Me

6

Redux en español

TodoMVC
Todos con Deshacer
Asíncrono
Universal
Mundo real
Carrito de compra
Vista de árbol

Si eres nuevo en el ecosistema de NPM y tiene problemas iniciando un proyecto, o no estas
seguro de donde pegar el gist de arriba, revisa simples-redux-example que usa React 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

Read Me

7

Redux en español

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:

Webflow
Chess iX

Ve la lista completa de patrocinadores de Redux.

Lice