Redux data flow with angular 2
•
3 likes•1,834 views
This document discusses combining Redux and Angular 2 for managing application state. It introduces Redux as a pattern based on Flux that uses a single state container. Key principles are a single source of truth for state, immutable state changes via pure functions, and a unidirectional data flow from views to actions to reducers to stores. The ng2-redux library makes it easy to use Redux in Angular 2 by providing store injection and selectors to observe state. Redux can reduce complexity for large single-page apps and is applicable to Angular.
Report
Share
Related slideshows
Redux data flow with angular 2
- 1. REDUX DATA FLOW WITH ANGULAR 2 Gil Fink CEO and Senior Consultant, sparXys @gilfink
- 4. Service Component Service ComponentComponent Component Component Service Service Component Service
- 6. Then you make a small change…
- 8. About Me • sparXys CEO and senior consultant • Microsoft MVP in the last 8 years • Pro Single Page Application Development (Apress) co-author • 4 Microsoft Official Courses (MOCs) co-author • GDG Rishon and AngularUP co-organizer
- 9. Agenda • The Redux pattern • Combining Redux and Angular 2 • ng2-redux library in a nutshell
- 10. Known SPA Complexity Solutions • Command Query Responsibility Segregation (CQRS) • Event Sourcing • Flux • And more
- 11. Redux • Design pattern based on Flux o But it’s not Flux! • Predictable state container for JavaScript apps
- 12. Redux Principles 1. Single source of truth
- 13. Single Source of Truth • The application state is stored in an object tree within a single store let state = store.getState();
- 14. Redux Principles 1. Single source of truth 2. State is read-only
- 15. State is Read-Only • The only way to mutate the state is to emit an action describing what happened store.dispatch({ type: 'ADD_GROCERY_ITEM', item: { productToBuy: 'Milk' } }); store.dispatch({ type: 'REMOVE_GROCERY_ITEM', index: 3 });
- 16. Redux Principles 1. Single source of truth 2. State is read-only 3. Changes are made with pure functions
- 17. Changes Are Made with Pure Functions • To specify how the state is transformed by actions, you write a pure function o Called reducer function groceryItemReducer(state, action) { switch (action.type) { case 'ADD_GROCERY_ITEM': return object.assign({}, state, { groceryItems: [ action.item, …state.groceryItems ] }; default: return state; } }
- 18. Let’s drill down
- 19. Redux Data Flow Action Creators View ReducersStore interaction (click, mouse etc.) dispatch(action) (previous state, action) (new state) (current state)
- 20. Redux Data Flow – Cont. Action Creators View ReducersStore interaction (click, mouse etc.) dispatch(action) (previous state, action) (new state) (current state) Outside Action (push, Ajax callback and etc.)
- 21. Redux Library API • Redux is a small and compact library: o createStore(reducer) o combineReducers(reducers) o applyMiddleware(middlewares) o compose(functions) o bindActionCreators(creators, dispatch) o Store API: • store.dispatch(action) • store.getState() • store.subscribe(listener)
- 24. Angular and Redux • Redux can be applied in Angular oriented applications o It’s a data flow pattern • Popular Angular 2 & Redux libraries: o ngrx/store o ng2-redux
- 26. ng2-redux - Setup • Add the module • Create the store and provide it in the main module import { NgReduxModule, NgRedux } from 'ng2-redux'; @NgModule({ imports: [ /* ... */, NgReduxModule ] }) class AppModule { constructor(ngRedux: NgRedux<IAppState>) { ngRedux.provideStore(store); } }
- 27. ng2-redux - Usage • Use the @select decorator and dispatch function: class App { @select() counter: Observable<number>; constructor(private ngRedux: NgRedux<IAppState>) {} increment() { this.ngRedux.dispatch({ type: INCREMENT}); } }
- 28. Demo Simple Redux + Angular 2 app
- 29. Summary • Redux o Is a data flow design pattern o Reduces complexity when building big SPAs o Can be applied in Angular apps
- 30. Resources • Redux: https://github.com/reactjs/redux • ng2-redux: https://github.com/angular-redux/ng2-redux • ngrx/store: https://github.com/ngrx/store • My Blog – http://www.gilfink.net • Follow me on Twitter – @gilfink
- 31. Thank You!