Slides for the 2016 Redux & Angular workshop. Redux is a popular library for state management. This workshop is about understanding how to use Redux and how to integrate it wit Angular 2

1. REDUX &
ANGULAR 2.0
Nir Kaufman

2. Nir Kaufman
Head of Angular Development @ 500Tech
- AngularJS evangelist
- International speaker
- Guitar player
*Photoshop

7. THE CHALLENGE

8. SPA BECOME
INCREASINGLY
COMPLICATED

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

15. EVERYTHING IS
CONNECTED TO
EVERYTHING

16. VIEW

17. VIEW
CONTROLLER

18. VIEW
CONTROLLER
MODEL MODEL

19. VIEW
CONTROLLER
MODEL MODEL MODEL

20. VIEW
CONTROLLER
MODEL MODEL MODEL
MODEL

21. VIEW
CONTROLLER
MODEL MODEL MODEL MODEL
MODEL

22. VIEW
CONTROLLER
MODEL
LIBRARY
MODEL MODEL MODEL
MODEL MODEL

23. VIEW
CONTROLLER
MODEL
LIBRARYLIBRARY
MODEL MODEL MODEL
MODEL MODEL MODEL MODEL

24. CHANGING SOMETHING
BREAKS SOMETHING
SOMEWHERE

26. ENTER REDUX

27. https://github.com/nirkaufman/redux-playground
http://tinyurl.com/hq23lsa
PLAY ALONG

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

31. REDUX INTREDUCE
THREE PRINCIPLES

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

38. app state
STOREUI
stateless UI

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

41. STOREUI
STATEgetState()

42. STOREUI
STATEgetState()
ACTIONdispatch(action)

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

59. PREDICTABLE
STATE CONTAINER

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

62. STORE API
dispatch(action)
subscribe(listener)
getState()
replaceReducer(reducer)

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

70. https://github.com/nirkaufman/angular2-redux-workshop.git
http://tinyurl.com/h4bqmut
GET THE CODE

71. git checkout master

72. AN ANGULAR APP IS A
TREE OF COMPONENTS

73. WE MAP PROPERTIES
TO THE STATE

74. WE DISPATCH ACTIONS
IN REACTION TO EVENTS

75. COMPONENT
COMPONENT
STORE
[properties](events)
actions
state

76. git checkout 01_project-structure

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

86. git checkout 02_wiring

87. COMMON SCENARIOS

88. REQUIREMENTS
CRUD operations
Authentication
Notifications
Persistance
View modes
Logging

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

90. git checkout 03_crud

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

92. git checkout 04_authentication

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

94. git checkout 05_spinner

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: []
};

98. git checkout 06_debugger

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
nir@500tech.com
Head of Angular Development @ 500Tech
@nirkaufman
github.com/nirkaufman
meetup.com/Angular-AfterHours/
keep in touch!