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
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;
}
}
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});
}
}