Curso
ANGULAR 4 + REDUX
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/4060932/Angular4_con_Redux-01.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
¿QUIÉN SOY?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
OBJETIVOS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
1. Comprender los conceptos claves de Redux.
2. Aprender a implementar un arquitectura de datos escalable con Angular.
3. Implementar Redux + Angular.
4. Aprender a definir estados globales para la aplicación.
BENEFICIOS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
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
MÓDULOS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
Módulo 1: Introducción
Módulo 2: Ideas clave de Redux
Módulo 3: Redux + Angular
Módulo 4: Proyecto
REQUISITOS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
- Conocimiento previo en Angular.
- VsCode
- Goolge Chrome
- Angular CLI
¡COMENCEMOS!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
ARQUITECTURA DE DATOS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
MODEL-VIEW-CONTROLLER
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://www.web20.co/wp-content/uploads/2015/02/mvc.png)
MODEL-VIEW-COLLECTION
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://www.teaching-materials.org/backbone/images/backbonediagram.jpeg)
VIEW-VIEWMODEL-MODEL
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://i-msdn.sec.s-msft.com/dynimg/IC448690.png)
FLUX
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://facebook.github.io/flux/img/flux-simple-f8-diagram-with-client-action-1300w.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/4061111/react_redux.png)
![](https://raw.githubusercontent.com/reactjs/redux/master/logo/logo.png)
¿POR QUÉ REDUX?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
FRONTEND ACTUAL
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
Controlar el estado
- Respuestas del servidor
- Datos en cache
- Datos locales
- Estados de la UI
FRONTEND ACTUAL
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
"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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
¿REDUX JUNTO CON RX?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
RX = manejar la complejidad de aplicaciones asíncronas
CONCEPTOS CLAVE DE REDUX
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
STATE
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
{
todos: [{
text: 'Aprender redux',
completed: true
}, {
text: 'Visitar nicobytes.com',
completed: false
}],
visibilityFilter: 'SHOW_COMPLETED'
}
ACTIONS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
{ type: 'ADD_TODO', text: 'Ir a nadar a la piscina' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }
REDUCERS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/4080131/Screen_Shot_2017-08-29_at_7.27.02_AM.png)
REDUCERS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
function visibilityFilter(state = 'SHOW_ALL', action) {
if (action.type === 'SET_VISIBILITY_FILTER') {
return action.filter;
} else {
return state;
}
}
REDUCERS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
function todos(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return state.concat([{ text: action.text, completed: false }]);
case 'TOGGLE_TODO':
return state.map((todo, index) =>
action.index === index ?
{ text: todo.text, completed: !todo.completed } :
todo
)
default:
return state;
}
}
LOS TRES PRINCIPIOS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
Redux puede ser descrito en tres principios fundamentales
ÚNICA FUENTE DE LA VERDAD
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
El estado de toda tu aplicación esta almacenado en un árbol guardado en un único store.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
https://css-tricks.com/learning-react-redux/
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
console.log(store.getState())
/* Imprime
{
visibilityFilter: 'SHOW_ALL',
todos: [
{
text: 'Considerar usar Redux',
completed: true
},
{
text: 'Mantener todo el estado en un solo árbol',
completed: false
}
]
}
*/
EL ESTADO ES DE SOLO LECTURA
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
La única forma de modificar el estado es emitiendo una acción, un objeto describiendo que ocurrió.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
store.dispatch({
type: 'COMPLETE_TODO',
index: 1
});
store.dispatch({
type: 'SET_VISIBILITY_FILTER',
filter: 'SHOW_COMPLETED'
});
LOS CAMBIOS SE REALIZAN EN FUNCIONES PURAS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
Para especificar como el árbol de estado es transformado por las acciones, se utilizan reducers puros.
REDUCERS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/4080131/Screen_Shot_2017-08-29_at_7.27.02_AM.png)
PROYECTO
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
- Sin Angular
- Sin ngrx
- Solo ts y redux
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
mkdir todos-redux
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
{
"name": "todos-redux",
"version": "1.0.0",
"description": "",
"author": "",
"license": "MIT",
"devDependencies": {
"ts-node": "3.3.0",
"typescript": "2.4.2"
},
"dependencies": {
"redux": "3.7.2"
}
}
package.json
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noEmitHelpers": true,
"sourceMap": true,
"lib": [
"es2016",
"dom"
]
},
"compileOnSave": false,
"buildOnSave": false
}
tsconfig.json
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
npm install
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
import { createStore } from 'redux';
console.log("Compile!!!")
index.ts
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
./node_modules/.bin/ts-node index.ts
run
¿QUÉ ES UN REDUCER?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
PROYECTO
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/4080131/Screen_Shot_2017-08-29_at_7.27.02_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
REDUCER
- Debe retornar el mismo tipo de data en el que es definido el reducer
- Por defecto debe retornar el estado original
- Debería recibir un estado inicial
- Crear un nuevo estado
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
interface Action{
type: string;
payload?: any;
}
ACTION
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
interface Reducer<T>{
(state: T, action: Action): T;
}
REDUCER
IMPLEMENTANDO ACTIONS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
La única forma de modificar el estado es emitiendo una acción, un objeto describiendo que ocurrió
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
interface Action{
type: string;
payload?: any;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
if(action.type === 'INCREMENT'){
return state + 1;
}
if(action.type === 'DECREMENT'){
return state - 1;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
switch(action.type){
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
switch(action.type){
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state + 1;
case 'PLUS':
return state + action.payload;
default:
return state;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
GUARDANDO NUESTRO ESTADO
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
{
todos: [{
text: 'Aprender redux',
completed: true
}, {
text: 'Visitar nicobytes.com',
completed: false
}],
visibilityFilter: 'SHOW_COMPLETED'
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
class Store<T>{
private state:T;
constructor(
private reducer: Reducer<T>,
initState: T
){
this.state = initState;
}
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
getState(): T{
return this.state;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
dispatch(action: Action): void{
this.state = this.reducer(this.state, action);
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
let store = new Store<number>(reducer, 0);
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
store.dispatch({type: 'INCREMENT'});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
console.log(store.getState());
IMPLEMENTANDO REDUX Y SUBSCRIBE
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
import {
Action,
Reducer,
createStore,
Store
} from 'redux';
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
interface PlusAction extends Action{
payload: number;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
let reducer: Reducer<number> = (state: number = 0, action: Action)=>{
switch(action.type){
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
case 'PLUS':
return state + (<PlusAction>action).payload;
default:
return state;
}
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
let store: Store<number> =
createStore<number>(reducer);
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
console.log(store.getState());
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
store.dispatch(...)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
store.subscribe(()=>{
console.log(store.getState());
})
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
¿QUÉ ES NGRX?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
Reactive Extensions for Angular
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/4115434/Screen_Shot_2017-09-11_at_4.48.14_PM.png)
ngrx/platform
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
Crear proyecto
ng new counter-app-ngrx
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
Instalar ngrx/store
npm install @ngrx/store --save
DEFINIR LAS ACCIONES
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
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;
}
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
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 REDUCER
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
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;
}
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
counter.reducer.ts
- El estado
- Su reducer
DEFINIR EL ESTADO DE LA APP
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
export interface AppState{
counter: number;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
app.reducer.ts
- El estado
- Su reducer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
StoreModule.forRoot(rootReducer),
Implementar el estado en la app
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
Leer estado desde un componente
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
Memoization
this.store.select()
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
Enviar acciones desde un componente
IMPLEMENTADO EN COMPONENTES
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
Redux DevTools Extension
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
![](https://cloud.githubusercontent.com/assets/7957859/18002950/aacb82fc-6b93-11e6-9ae9-609862c18302.png)
Actions Creator
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/3963600/angular2-series-bg.png)
PROYECTO
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
PROYECTO
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
CREANDO LA ESTRUCTURA REDUX
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
ng new todo-app-ngrx --sytle scss
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
npm install @ngrx/store --save
npm install @ngrx/store-devtools --save
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/4125622/Screen_Shot_2017-09-14_at_10.25.06_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/77451/images/4125640/Screen_Shot_2017-09-14_at_10.28.46_AM.png)
CREANDO COMPONENTES
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
- TodoComponent
- TodoListComponent
- NewTodoComponent
- FooterComponent
AGREGAR UNA TAREA
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
LISTAR TAREAS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
ELIMINAR UNA TAREA
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
TOGGLE DE UNA TAREA
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
EDITAR DE UNA TAREA
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
AGREGANDO ESTILOS DE TODOMVC
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
npm install todomvc-common --save
npm install todomvc-app-css --save
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
@import '~todomvc-common/base.css';
@import '~todomvc-app-css/index.css';
FOOTER COMPONENT
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
SELECTORS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
FILTERS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
CREANDO RUTAS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
SELECTOR PARA TAREAS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
DEPLOY
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://cdn-images-1.medium.com/max/650/1*5n0uJ3CTF8MiKJJhNkNJMA.png)
CREAR PROYECTO
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
INSTALAR FIREBASE CLI
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
firebase init
ng build --target=production --base-href /
firebase deploy
COSAS POR HACER
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
https://github.com/DevcodeInc/Curso-de-Angular-4-y-Redux
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
- Limpiar todas las tareas hechas
- Toggle pero de todas las tareas
- Persistencia
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
https://github.com/nicobytes/todo-app-ngrx/
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
Un largo camino
![](https://s3.amazonaws.com/media-p.slid.es/uploads/708405/images/3786067/devcode_name-01.png)
www.devcode.la
GRACIAS...
Curso de Angular 4 y Redux
By devcodela
Curso de Angular 4 y Redux
Curso de Angular 4 y Redux
- 1,807