redux data flow with angular 2
TRANSCRIPT
REDUX DATA FLOW WITH
ANGULAR 2
Gil Fink
CEO and Senior Consultant, sparXys
@gilfink
SPAs Are Complex
Service
Component
Service
Component Component
Service
Component
Service
Component Component
Component
Component
Service
Service Component
Service
5
Service
Component
Service
Component Component
Component
Component
Service
Service Component
Service
Service
Component
Service
Component Component
Component
Component
Service
Service Component
Service
Service
Component
Service
Component Component
Component
Component
Service
Service Component
Service
Then you make a small change…
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
Agenda • The Redux pattern
• Combining Redux and Angular 2
• ng2-redux library in a nutshell
Known SPA Complexity Solutions
• Command Query Responsibility Segregation (CQRS)
• Event Sourcing
• Flux
• And more
Redux • Design pattern based on Flux
o But it’s not Flux!
• Predictable state container for JavaScript apps
Redux Principles 1. Single source of truth
Single Source of Truth • The application state is stored in an object tree
within a single store
let state = store.getState();
Redux Principles 1. Single source of truth
2. State is read-only
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 });
Redux Principles 1. Single source of truth
2. State is read-only
3. Changes are made with pure functions
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; } }
Let’s drill down
Redux Data Flow
Action Creators
View
Reducers Store
interaction (click, mouse etc.)
dispatch(action) (previous state, action)
(new state) (current state)
Redux Data Flow – Cont.
Action Creators
View
Reducers Store
interaction (click, mouse etc.)
dispatch(action) (previous state, action)
(new state) (current state)
Outside Action (push, Ajax
callback and etc.)
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)
Demo Redux in action
What about Angular?
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
ng2-redux https://github.com/angular-redux/ng2-redux
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); } }
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}); } }
Demo Simple Redux + Angular 2 app
Summary • Redux
o Is a data flow design pattern
o Reduces complexity when building big SPAs
o Can be applied in Angular apps
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
Thank You!