More Related Content Similar to Redux with angular 2 - workshop 2016 (20) More from Nir Kaufman (9) Redux with angular 2 - workshop 20162. Nir Kaufman
Head of Angular Development @ 500Tech
- AngularJS evangelist
- International speaker
- Guitar player
*Photoshop
28. REDUX IS A LIBRARY
FOR IMPLEMNETING A
DESIGN PATTERN
37. const state = {
tabs: [],
accounts: [],
sidebar: {}
};
Application state
39. THE STATE IS
READ ONLY
the only way to mutate the state is to emit an
action, an object describing what happened
53. REDUCE METHOD
applies a function against an accumulator and
each value of the array (from left-to-right) to
reduce it to a single value.
54. function sum (previousVal, currentVal) {
return previousVal + currentVal;
}
[0, 1, 2, 3, 4].reduce(sum);
// => 10
Reduce in action
56. function counter (state, action) {
switch (action) {
case 'up':
return state + 1;
case 'down':
return state - 1;
default:
return state;
}
}
['up', 'up', 'down'].reduce( counter, 0 );
Simple counter app
61. function createStore(reducer) {
let state = null;
const listeners = [];
function getState() {
return state;
}
function dispatch(action) {
state = reducer(state, action);
listeners.forEach( listener => listener() )
}
function subscribe(listener) {
listeners.push(listener);
return function unsubscribe() {
let index = listeners.indexOf(listener);
listeners.splice(index, 1)
}
}
return { getState, dispatch, subscribe }
}
66. Async flow with middlewares
UI STORE
state
MIDDLEWARE
action action
67. export const middleware = store => next => action => {
return next(action)
};
Middleware
- get the current state from the store
- pass an action to the next middleware
- access the provided action
69. ANGULAR IS A NEW
PLATFORM FOR BUILDING
COMPLEX MODERN SPA’S
79. import {createStore} from “redux";
import {RootReducer} from './reducers/root';
export class Store {
private store = createStore(rootReducer);
get state() {
return this.store.getState();
}
dispatch(action){
this.store.dispatch(action)
}
}
82. WE NEED TO REGISTER
OUR STORE PROVIDER
ON THE MODULE
84. NOW WE CAN INJECT
IT TO OUR COMPONENT
AND GET THE STATE!
89. @Injectable()
export class ListActions {
private store:Store;
constructor(_store:Store) {
this.store = _store;
}
add(item) {
this.store.dispatch({
type : LIST.ADD_ITEM,
payload: item
})
}
remove(item) {
this.store.dispatch({
type : LIST.REMOVE_ITEM,
payload: item
})
}
}
The list actions class is
an helper for dispatching
actions to the store
91. @Injectable()
export class Auth {
private http:Http;
private URL:string;
constructor(_http:Http) {
this.http = _http;
this.URL = 'http://localhost:4000/api/login';
}
middleware = store => next => action => {
if (action.type !== USER.LOGIN) {
return next(action)
} else if (action.type === USER.LOGIN) {
const successHandler = result => next({
type : USER.LOGIN_SUCCESS,
payload: result.json()
});
const errorHandler = error => next({
type : USER.LOGIN_FAILED,
payload: error.json()
});
this.http.post(this.URL, action.payload)
.subscribe(successHandler, errorHandler);
return next({type: APP.LOADING})
}
}
}
By wrapping the
middleware in provider
we can use angular
services such as Http
93. const initialState = {
loading: false
};
export function appReducer(state = initialState, action) {
switch (action.type) {
case APP.LOADING:
return Object.assign({}, state, {loading: true});
case APP.READY:
case USER.LOGIN_SUCCESS:
return Object.assign({}, state, {loading: false});
default:
return state;
}
}
‘application level’ reducer can handle
96. class Model {
private items = [];
addItem(item) {}
updateIten(item) {...}
removeItem(item) {...}
}
separation of state from mutation methods
97. class ModelCrud {
static addItem(model, item) {…}
static updateIten(model, item) {…}
static removeItem(model, item) {…}
}
separation of state from mutation methods
const Model = {
items: []
};
100. Angular & Redux Workshop
https://leanpub.com/redux-book
THE COMPLETE
REDUX BOOK
101. Angular & Redux Workshop
RESOURCES
REDUX
http://redux.js.org/
https://egghead.io/series/getting-started-with-redux
CQRS & EVENT SOURCING
https://msdn.microsoft.com/en-us/library/dn568103.aspx
https://msdn.microsoft.com/en-us/library/dn589792.aspx
ANGULAR 2
angular-2-change-detection-explained.html
https://github.com/ngrx/store
https://github.com/angular-redux/ng2-redux