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
• 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
• But it’s not Flux!
• Predictable state container for JavaScript apps
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
function groceryItemReducer(state, action) {
switch (action.type) {
case 'ADD_GROCERY_ITEM':
return object.assign({}, state, {
groceryItems: [
action.item,
…state.groceryItems
]
};
default:
return state;
}
}
20. Actions
• Plain JavaScript objects
• Include
• Type – action type
• Payload – the change that should occur
let action = {
type: 'ADD_GROCERY_ITEM',
item: { productToBuy: 'Milk' }
};
Action
Creators
22. Reducers
• Change the state in response to things that happened in the
application
• Pure functions
function groceryItemReducer(state, action) {
switch (action.type) {
case ADD_GROCERY_ITEM:
return object.assign({}, state, {
groceryItems: [
action.item,
…state.groceryItems
]
};
default:
return state;
}
}
Reducers
23. Store
• Only one store object
• Store data accessed through getState function
• Updates only in response to dispatching an action
import {createStore} from ‘redux’;
import {groceryItemReducer} from ‘./reducers/groceryItemReducer’;
const store = createStore(groceryItemReducer);
Store
28. Redux Middleware
• Extension point between dispatching an action and the reducer
• Middleware examples:
• Logging
• Async operations
• Routing
const middleware = store => next => action => {
// do something before dispatcher
let result = next(action);
// do something after dispatcher
return result;
}
const store = createStore(reducer, applyMiddleware(middleware));
31. Angular and Redux
• Redux can be applied in Angular oriented applications
• It’s a data flow pattern
• Popular Angular & Redux libraries:
• ng2-redux
• ngrx/store
33. 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);
}
}
34. 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});
}
}