Redux with angular 2 - workshop 2016
15 likes2,388 views
The document discusses the integration of Redux with Angular 2.0 for managing complex state in single-page applications (SPAs). It outlines Redux principles like a single source of truth, unidirectional data flow, and the use of pure functions for state management. The document also includes practical code examples illustrating the setup and usage of Redux within Angular applications.
![class Accounts {
private accounts: Account[];
getAccounts() {
return this.accounts;
}
}
Data Models](https://image.slidesharecdn.com/redux-angular2-2016-160824052137/85/Redux-with-angular-2-workshop-2016-36-320.jpg)
![const state = {
tabs: [],
accounts: [],
sidebar: {}
};
Application state](https://image.slidesharecdn.com/redux-angular2-2016-160824052137/85/Redux-with-angular-2-workshop-2016-37-320.jpg)
![function sum (previousVal, currentVal) {
return previousVal + currentVal;
}
[0, 1, 2, 3, 4].reduce(sum);
// => 10
Reduce in action](https://image.slidesharecdn.com/redux-angular2-2016-160824052137/85/Redux-with-angular-2-workshop-2016-54-320.jpg)
![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](https://image.slidesharecdn.com/redux-angular2-2016-160824052137/85/Redux-with-angular-2-workshop-2016-56-320.jpg)
![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 }
}](https://image.slidesharecdn.com/redux-angular2-2016-160824052137/85/Redux-with-angular-2-workshop-2016-61-320.jpg)
actions
state](https://image.slidesharecdn.com/redux-angular2-2016-160824052137/85/Redux-with-angular-2-workshop-2016-75-320.jpg)
![@NgModule({
declarations: [AppComponent],
imports : [BrowserModule, HttpModule],
providers : [Store],
bootstrap : [AppComponent]
})](https://image.slidesharecdn.com/redux-angular2-2016-160824052137/85/Redux-with-angular-2-workshop-2016-83-320.jpg)
![class Model {
private items = [];
addItem(item) {}
updateIten(item) {...}
removeItem(item) {...}
}
separation of state from mutation methods](https://image.slidesharecdn.com/redux-angular2-2016-160824052137/85/Redux-with-angular-2-workshop-2016-96-320.jpg)
![class ModelCrud {
static addItem(model, item) {…}
static updateIten(model, item) {…}
static removeItem(model, item) {…}
}
separation of state from mutation methods
const Model = {
items: []
};](https://image.slidesharecdn.com/redux-angular2-2016-160824052137/85/Redux-with-angular-2-workshop-2016-97-320.jpg)
Redux with angular 2 - workshop 2016
- 1. REDUX & ANGULAR 2.0 Nir Kaufman
- 2. Nir Kaufman Head of Angular Development @ 500Tech - AngularJS evangelist - International speaker - Guitar player *Photoshop
- 9. THERE IS NOTHING WRONG WITH THE MVC PATTERN
- 10. IF YOU ARE BUILDING A CRUD APPLICATION
- 12. BUT WE ARE PUSHING THE ENVELOPE AS MUCH AS WE CAN
- 14. MANAGING AN EVER-CHANGING STATE IS A HARD TASK
- 16. VIEW
- 17. VIEW CONTROLLER
- 21. VIEW CONTROLLER MODEL MODEL MODEL MODEL MODEL
- 23. VIEW CONTROLLER MODEL LIBRARYLIBRARY MODEL MODEL MODEL MODEL MODEL MODEL MODEL
- 26. ENTER REDUX
- 28. REDUX IS A LIBRARY FOR IMPLEMNETING A DESIGN PATTERN
- 29. REDUX ATTEMPTS TO MAKE STATE MUTATIONS PREDICTABLE
- 30. INSPIRED BY FLUX, CQRS & EVENT SOURCING
- 32. SINGLE SOURCE OF TRUTH the state of your whole application is stored in an object tree within a single store
- 33. THE TRUTH IS OUT THERE
- 34. class SideBarComponent { private visible: boolean; toggle(){ this.visible = !this.visible } } Stateful components
- 35. class TabsComponent { private activeTab:Tab; activateTab(tab) { this.activeTab = tab; } } Stateful components
- 36. class Accounts { private accounts: Account[]; getAccounts() { return this.accounts; } } Data Models
- 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
- 40. class Store { private state: Object; getState(){ return this.state; } } Read-only State
- 43. PURE FUNCTIONS to specify how the state tree is transformed by actions, you write pure functions.
- 44. PURE FUNCTION return value is only determined by its input values, without observable side effects.
- 45. PURE FUNCTION Current State Action Next State Calculate the next state
- 46. PURE FUNCTION Current State Action Next State Reducer Calculate the next state
- 47. Uni directional data flow UI STOREactions state
- 48. ENTER THE STORE
- 49. THE STORE IS THE HEART OF REDUX
- 50. TO CREATE A STORE WE NEED A REDUCER
- 51. import { createStore } from 'redux'; const store = createStore(reducer);
- 52. import { createStore } from 'redux'; const store = createStore(reducer);
- 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
- 55. EVENT SOURCING capture all changes to an application state as a sequence of events.
- 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
- 57. THE REDUCER RETURNS THE NEXT STATE BASED ON A SEQUENCE OF ACTIONS
- 58. THE SAME SEQUENCE OF ACTIONS WILL PRODUCE THE SAME STATE
- 60. HANDS ON! implementing a working store in less then 30 lines of code.
- 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 } }
- 63. ASYNC DATA FLOW
- 64. MIDDLEWARE extension point between dispatching an action, and the moment it reaches the reducer.
- 65. Async flow with middlewares UI STOREaction state
- 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
- 68. ANGULAR & REDUX
- 69. ANGULAR IS A NEW PLATFORM FOR BUILDING COMPLEX MODERN SPA’S
- 72. AN ANGULAR APP IS A TREE OF COMPONENTS
- 73. WE MAP PROPERTIES TO THE STATE
- 74. WE DISPATCH ACTIONS IN REACTION TO EVENTS
- 77. ANGULAR 2.0 ENCOURAGING AN OOP APPROACH
- 78. TO USE DEPENDENCY INJECTIONS WITH REDUX WE WRAP STUFF IN PROVIDERS
- 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) } }
- 80. WE COMBINE MULTIPLY REDUCERS TO ONE ROOT REDUCER
- 81. import {combineReducers} from 'redux'; export const RootReducer = combineReducers({ app: (state = 0) => state }); combineReducers in action
- 82. WE NEED TO REGISTER OUR STORE PROVIDER ON THE MODULE
- 83. @NgModule({ declarations: [AppComponent], imports : [BrowserModule, HttpModule], providers : [Store], bootstrap : [AppComponent] })
- 84. NOW WE CAN INJECT IT TO OUR COMPONENT AND GET THE STATE!
- 85. export class AppComponent { constructor(store: Store) { console.log(store.state); } }
- 87. COMMON SCENARIOS
- 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
- 95. GET READY FOR TIME TRAVEL DEBUGGING
- 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: [] };
- 99. NEXT STEPS
- 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
- 102. NIR KAUFMAN [email protected] Head of Angular Development @ 500Tech @nirkaufman github.com/nirkaufman meetup.com/Angular-AfterHours/ keep in touch!