Download as PDF, PPTX
![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; } }](https://image.slidesharecdn.com/reduxdataflowwithangular2-161118085712/75/Redux-data-flow-with-angular-2-17-2048.jpg)
![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); } }](https://image.slidesharecdn.com/reduxdataflowwithangular2-161118085712/75/Redux-data-flow-with-angular-2-26-2048.jpg)
Uploaded byGil Fink
Redux data flow with angular 2
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.
Redux data flow with angular 2
- 1. REDUX DATA FLOWWITH ANGULAR 2 Gil Fink CEO and Senior Consultant, sparXys @gilfink
- 2.
- 3.
- 4.
- 5.
- 6. Then you makea small change…
- 8. About Me • sparXysCEO 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 Reduxpattern • 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 patternbased on Flux o But it’s not Flux! • Predictable state container for JavaScript apps
- 12. Redux Principles 1. Singlesource of truth
- 13. Single Source ofTruth • The application state is stored in an object tree within a single store let state = store.getState();
- 14. Redux Principles 1. Singlesource 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. Singlesource of truth 2. State is read-only 3. Changes are made with pure functions
- 17. Changes Are Madewith 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.
- 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)
- 22.
- 23.
- 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
- 25.
- 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 Isa 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.