¿QUIÉN SOY?

ARQUITECTURA DE DATOS

MODEL-VIEW-CONTROLLER

MODEL-VIEW-COLLECTION

VIEW-VIEWMODEL-MODEL

FLUX

¿POR QUÉ REDUX?

FRONTEND ACTUAL

Controlar el estado

- Respuestas del servidor

​- Datos en cache

- Datos locales

- Estados de la UI

FRONTEND ACTUAL

"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

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

time-travelling debugger

¿REDUX JUNTO CON RX?

RX = manejar la complejidad de aplicaciones asíncronas

https://github.com/ngrx

CONCEPTOS CLAVE DE REDUX

LOS TRES PRINCIPIOS

Redux puede ser descrito en tres principios fundamentales

ÚNICA FUENTE DE LA VERDAD

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

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

STATE

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

EL ESTADO ES DE SOLO LECTURA

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

ACTIONS

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

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

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

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

LOS CAMBIOS SE REALIZAN EN FUNCIONES PURAS

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

REDUCERS

¿QUÉ ES NGRX?

Reactive Extensions for Angular

ngrx/platform

Crear proyecto

ng new counter-app-ngrx

Instalar ngrx/store

npm install @ngrx/store --save

PROYECTO

REDUX PURO

https://github.com/EscuelaIt/redux-angular

mkdir redux-angular

{
  "name": "angular-redux",
  "version": "1.0.0",
  "description": "",
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "ts-node": "3.3.0",
    "typescript": "2.6.1"
  },
  "dependencies": {
    "redux": "3.7.2"
  }
}

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noEmitHelpers": true,
    "sourceMap": true,
    "lib": [
      "es2016",
      "dom"
    ]
  },
  "compileOnSave": false,
  "buildOnSave": false
}

1. npm install

2. crear index.ts

3. ./node_modules/.bin/ts-node index.ts

CLASE 2

En la clase anterior...

1.  Ideas clave de redux
2. Creamos aciones y reducer

STORE

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

http://es.redux.js.org/docs/introduccion/tres-principios.html

class Store<T>{
  private state:T;

  constructor(
    private reducer: Reducer<T>,
    initState: T
  ){
    this.state = initState;
  }
}

IMPLEMENTANDO REDUX Y SUBSCRIBE

ANGULAR + REDUX

INSTALAR

REDUCER

let reducer: Reducer<number> = (state: number = 0, action: Action) =>{
  if(action === null) return state;
  switch(action.type){
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    case 'PLUS':
      return state + (<PlusAction>action).payload;
    default:
      return state;
  }
}

Actions

import { Action } from '@ngrx/store';

export const INCREMENT = '[Counter] increment';
export const DECREMENT = '[Counter] decrement';
export const PLUS = '[Counter] plus';
export const RESET = '[Counter] reset';

export interface PlusAction extends Action{
  payload: number;
}

DEFINIR EL ESTADO DE LA APP

AppState

export interface AppState{
  counter: number;
}

AppModule

StoreModule.forRoot(rootReducer),

AppModule

StoreModule.forRoot(rootReducer),

Leer estado desde un componente

this.store.select()

Memoization

Enviar acciones desde un componente

Redux DevTools Extension

CLASE 3

En la clase anterior...

1.  Redux + Angular
2. Enviar acciones desde componetes

RESET

Redux DevTools Extension

Action Creator

export const rootReducer: ActionReducerMap<AppState> = {
  todos: TodosReducer,
  filter: FilterReducer
};

export class NameAction implements Action {
  readonly type = NAME_TODO;

  constructor(
    public payload: string
  ) {}
}

PROYECTO

ng new tasks-angular-redux --sytle scss

1. Crear estructura redux
2. Crear todo.model.ts
3. Crear todo.actions.ts
4. Crear todo.reducers.ts
5. Crear todo.selectors.ts

• TodoComponent
• TodoListComponent
• NewTodoComponent
• FooterComponent

AGREGAR UNA TAREA

LISTAR TAREAS

ELIMINAR UNA TAREA

MARCAR UNA TAREA

EDITAR UNA TAREA

AGREGANDO ESTILOS DE TODOMVC

npm install todomvc-common --save
npm install todomvc-app-css --save

npm install todomvc-common --save
npm install todomvc-app-css --save

@import '~todomvc-common/base.css';
@import '~todomvc-app-css/index.css';

CLASE 5

- Effects

- REST API