Como manejar el estado de las aplicaciones con Redux en Angular 2. Git: https://github.com/GermanKuber/Angular-Redux

1. Manejar el estado de nuestra
aplicación Angular con Redux
@germankuber
http://germankuber.com.ar
http://net-baires.com.ar

2. ¿Por qué Angular?

3. ¿Por qué Redux?

4. • Gestión predecible del estado
• Flujo de trabajo de desarrollador
agradable
• Funciones puras
• Soporte de primer nivel para Angular
• Viene con enlaces de TypeScript

5. Los 3
conceptos
clave de
Redux

6. 1. Única fuente de verdad
2. El estado es de solo lectura
3. Funciones puras conducen cambios
de estado

7. View
Component
Actions
Redux Store
State
Reducer
Obtiene el estado inicial y luego
actualiza través de suscripción
Desencadena una acción
cuando el usuario interactúa
con el componente
La acción se envía a la tienda
Se almacena
el estado

9. Root State
Course
Users
coursesReducer()
usersReducer()

10. +

11. import { NgReduxModule, NgRedux } from ‘ng2-redux';
…
imports: [
…
NgReduxModule
],
…
Importar NgRedux

12. Construyendo el store
export class AppModule
{
constructor(ngRedux: NgRedux<IAppState>) {
ngRedux.provideStore(store);
}
}

13. Usar Store en nuestros componentes
@select('filteredCourses') filteredCourses$:
Observable<Course>;
constructor(
private ngRedux: NgRedux<IAppState>,
private courseActions: CourseActions,
) {}

14. Actions inyectables
@Injectable()
export class CourseActions {}

15. Acceder a los servicios de las acciones
constructor(
private ngRedux: NgRedux<IAppState>,
private courseService: CourseService,
) {}

16. Dispachando acciones
filterCourses(searchText:string) {
this.ngRedux.dispatch({
type: FILTER_COURSES,
searchText,
});
}

18. Gracias !!!
@germankuber
http://germankuber.com.ar
http://net-baires.com.ar