En este lunch & learn Eduardo nos presentará Redux, una forma de crear contenedores de estados predecibles para aplicaciones JavaScrip. También nos habla de @barcitomx , problemas y soluciones. ¡Esperamos que lo disfrutes!

1. REDUX CON REACT
o, "Cómo me enamoré de un contenedor de estado"

2. EDUARDO VAUGIER
@Cool_Acid
github.com/cool-acid

3. EL
PROBLEMA

6. API

7. API

8. API

9. API

10. API

11. API

12. API

13. API

14. API

15. API

16. API

17. API

18. FLUX

19. FLUJO DE DATOS

20. FLUJO DE DATOS

21. CAMBIOS DE ESTADO
PRECEDIBLES

22. REDUX

23. ACTION CREATOR
‣ Todos los cambios son
iniciados por acciones
‣ Da formato al mensaje para
que el sistema lo entienda.

24. STORE
‣ Guarda todo el estado.
‣ Hay una y solo una. (≠ Flux)
‣ Hace el dispatching. (≠ Flux)
‣ El estado es inmutable

25. REDUCERS
‣ La Store les pregunta cómo una
acción cambia el estado
‣ El root reducer envía los
cachitos de estado a su
respectivo reducer
‣ Todos los cambios son
realizados en una copia

26. VIEWS
‣ Smart & Dumb components.
‣ Smart: A cargo de las acciones.
‣ Smart: Muchas veces no
generan DOM. Sólo realizan la
lógica.

27. VIEW LAYER BINDING
‣ Conecta el Store a los Views
‣ react-redux
‣ Provider
‣ connect()
‣ selector

28. ROOT COMPONENT
‣ Inicia todos los componentes.
‣ Crea la tienda.
‣ Le dice qué root reducer usar.
‣ Conecta las views y el view
layer binding.

29. PRINCIPIOS DE REDUX
‣ Solo hay un estado. Solo hay
una store.
‣ El estado es de solo lectura
‣ Los cambios son hechos con
funciones puras.

30. MANOS A LA
OBRA

33. EL USUARIO
QUIERE MI
CABELLO CAFÉ

36. {
type: ‘COLOR_CABELLO’,
color: 'cafe',
}

39. AQUÍ ESTÁ EL ESTADO Y
LOS CAMBIOS QUE ME
MANDARON… HAZLE
COMO PUEDAS

44. 1. Hace una copia de su cachito.

45. 1. Hace una copia de su cachito.
2. Hace los cambios requeridos a la copia.

46. 1. Hace una copia de su cachito.
2. Hace los cambios requeridos a la copia.
3. Le envía la copia modificada a su superior.

51. AQUÍ ESTÁ EL
NUEVO ESTADO

54. OYE, MI ESTADO
CAMBIÓ… AQUÍ
ESTÁ EL NUEVO

57. ¡EL ESTADO
CAMBIÓ! CAMBIA
LA FORMA EN
QUE TE VES

62. MIDDLEWARE

63. MIDDLEWARE

64. MIDDLEWARE
▸ redux thunk
▸ redux-api-middleware
▸ normalizr
▸ localstorage
▸ etc…

65. ¿Y COMO RESUELVE
MI PROBLEMA?

66. MI STORE
{
productos: { },
carrito: { },
}

67. MIS ACTION CREATORS
export function fetchProducts(){
return function (dispatch) {
return sa.get(Barcito.domain + '/api/products')
.set('Content-Type', 'application/json')
.set('Accept', 'application/json')
.end((err, res) => {
if (res.ok) {
dispatch(productsReceive(res.body));
} else {
console.log(res.body);
}
})
}
}

68. MIS ACTION CREATORS
export function productsReceive(products) {
return {
type: 'PRODUCTS_RECEIVE',
products
}
}

69. MIS ACTION CREATORS
export function increaseCart(itemID) {
return {
type: 'INCREASE_CART',
itemID
}
}
export function decreaseCart(itemID) {
return {
type: 'DECREASE_CART',
itemID
}
}
export function removeCart(itemID) {
return {
type: 'REMOVE_CART',
itemID
}
}

70. MIS REDUCERS
function cart(state = {}, action) {
switch (action.type) {
case 'INCREASE_CART':
...
case 'DECREASE_CART':
...
case 'REMOVE_CART':
...
case 'CLEAR_CART':
return {}
default:
return state;
}
}

71. MIS REDUCERS
case 'INCREASE_CART':
var newItem = {};
if (action.itemID in state) {
newItem[action.itemID] = state[action.itemID] + 1;
} else {
newItem[action.itemID] = 1;
}
return Object.assign({}, state, newItem);

72. ▸ Genero una acción que va a hacer el request al API
▸ Cuando el request regresa, se dispara una acción que va a
popular el store
AL INICIO DE LA APLICACIÓN

73. MI STORE
{
productos: {
1234: {
id: 1234,
nombre: “Tequila Herradura”,
},
4321: {
id: 4321,
nombre: “Marlboro”,
}
},
carrito: { },
}

76. EL USUARIO
QUIERE UNA
BOTELLA
HERRADURA

79. {
type: ‘INCREASE_CART’,
itemID: 1234,
}

82. AQUÍ ESTÁ EL ESTADO Y
LOS CAMBIOS QUE ME
MANDARON… HAZLE
COMO PUEDAS

84. {
productos: {
1234: {
id: 1234,
nombre: “Tequila Herradura”,
},
4321: {
id: 4321,
nombre: “Marlboro”,
}
},
carrito: { },
}
{
type: ‘INCREASE_CART’,
itemID: 1234,
}

85. {
productos: {
1234: {
id: 1234,
nombre: “Tequila Herradura”,
},
4321: {
id: 4321,
nombre: “Marlboro”,
}
},
carrito: { },
}
{
type: ‘INCREASE_CART’,
itemID: 1234,
}

86. state = { } (el carrito)
{
type: ‘INCREASE_CART’,
itemID: 1234,
}

87. state = { } (el carrito)
{
type: ‘INCREASE_CART’,
itemID: 1234,
}
case 'INCREASE_CART':
var newItem = {};
if (action.itemID in state) {
newItem[action.itemID] = state[action.itemID] + 1;
} else {
newItem[action.itemID] = 1;
}
return Object.assign({}, state, newItem);

88. state = { } (el carrito)
{
type: ‘INCREASE_CART’,
itemID: 1234,
}
case 'INCREASE_CART':
var newItem = {};
if (action.itemID in state) {
newItem[action.itemID] = state[action.itemID] + 1;
} else {
newItem[action.itemID] = 1;
}
return Object.assign({}, state, newItem);
state = {
1234: 1
}

91. {
productos: {
1234: {
id: 1234,
nombre: “Tequila Herradura”,
},
4321: {
id: 4321,
nombre: “Marlboro”,
}
},
carrito: {
1234: 1,
},
}

94. AQUÍ ESTÁ EL
NUEVO ESTADO

97. OYE, MI ESTADO
CAMBIÓ… AQUÍ
ESTÁ EL NUEVO

100. ¡EL ESTADO
CAMBIÓ! CAMBIA
LA FORMA EN
QUE TE VES

104. DEMO TAIM

105. ¡MUCHAS
GRACIAS!

106. ¿PREGUNTAS?