INTRODUCCIÓN

www.devcode.la

¿QUIÉN SOY?

www.devcode.la

www.devcode.la

www.devcode.la

BENEFICIOS

www.devcode.la

1.  Arquitectura escalable de datos.

2.  Mayor control en el flujo de datos.

3.  Programación Funcional.

4.  Control de estados.

5. Estado global e immutable

ARQUITECTURA DE DATOS

www.devcode.la

MODEL-VIEW-CONTROLLER

www.devcode.la

MODEL-VIEW-COLLECTION

www.devcode.la

VIEW-VIEWMODEL-MODEL

www.devcode.la

FLUX

www.devcode.la

www.devcode.la

¿POR QUÉ REDUX?

www.devcode.la

FRONTEND ACTUAL

www.devcode.la

Controlar el estado

 

- Respuestas del servidor

​- Datos en cache

- Datos locales

- Estados de la UI

FRONTEND ACTUAL

www.devcode.la

"En cierto punto, ya no se entiende que esta pasando en la aplicación ya que perdiste control sobre el cuándo, el por qué y el cómo de su estado"

FRONTEND ACTUAL

www.devcode.la

Redux intenta hacer predecibles las mutaciones del estado

 

- Store = La única fuente de la verdad

- Actions = El estado es de solo lectura

- Reducers = Los cambios los realizan acciones puras

FRONTEND ACTUAL

www.devcode.la

¿REDUX JUNTO CON RX?

www.devcode.la

RX = manejar la complejidad de aplicaciones asíncronas

CONCEPTOS CLAVE DE REDUX

www.devcode.la

LOS TRES PRINCIPIOS

www.devcode.la

Redux puede ser descrito en tres principios fundamentales

ÚNICA FUENTE DE LA VERDAD

www.devcode.la

El estado de toda tu aplicación esta almacenado en un árbol guardado en un único store.

www.devcode.la

https://css-tricks.com/learning-react-redux/

STATE

www.devcode.la

{
  todos: [{
    text: 'Aprender redux',
    completed: true
  }, {
    text: 'Visitar nicobytes.com',
    completed: false
  }],
  visibilityFilter: 'SHOW_COMPLETED'
}

EL ESTADO ES DE SOLO LECTURA

www.devcode.la

La única forma de modificar el estado es emitiendo una acción, un objeto describiendo que ocurrió.

ACTIONS

www.devcode.la

{ type: 'ADD_TODO', text: 'Ir a nadar a la piscina' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }

www.devcode.la

store.dispatch({
  type: 'COMPLETE_TODO',
  index: 1
});

store.dispatch({
  type: 'SET_VISIBILITY_FILTER',
  filter: 'SHOW_COMPLETED'
});

www.devcode.la

https://css-tricks.com/learning-react-redux/

LOS CAMBIOS SE REALIZAN EN FUNCIONES PURAS

www.devcode.la

Para especificar como el árbol de estado es transformado por las acciones, se utilizan reducers puros.

REDUCERS

www.devcode.la

www.devcode.la

www.devcode.la

www.devcode.la

GRACIAS...

Made with Slides.com