Redux is an architectural pattern inspired by concepts from stateless web architecture patterns and functional programing paradigms. It introduces a unidirectional data-flow and a predictable state container that scales. It's a popular mind-blowing alternative to the popular MVC pattern, and solves a lot of issues in an elegant and clean way. While Redux is view agnostic and can be used with any view library, we will build our presentation layer with Angular2. 

1. REDUX & ANGULAR
UP & RUNNING
NIR KAUFMAN

2. AGENDA
what is redux?
how to use redux?
where Angular fits in?
where to go from here?

3. WHAT IS REDUX

4. REDUX IS A
DESIGN PATTERN
for managing a complex, ever changing state
in a challenging modern single page applications

5. SINGLE SOURCE
OF TRUTH
the state of your whole application is
stored within a single store

6. THE STATE IS
READ ONLY
the only way to mutate the state is to emit
an action describing what happened

7. PURE FUNCTIONS
to specify how the state is transformed
by actions, you write a pure function.

8. PURE*
FUNCTION
ACTION NEXT STATE
* No side-effects
reducer

9. const currentState = 0;
const action = {type: 'INCREASE'};
function reducer(action, currentState){
if(action.type === 'INCREASE') {
return currentState + 1;
}
return currentState;
}

10. const currentState = 0;
const action = {type: 'INCREASE'};
function reducer(action, currentState){
if(action.type === 'INCREASE') {
return currentState + 1;
}
return currentState;
}

11. const currentState = 0;
const action = {type: 'INCREASE'};
function reducer(action, currentState){
if(action.type === 'INCREASE') {
return currentState + 1;
}
return currentState;
}

12. const currentState = 0;
const action = {type: 'INCREASE'};
function reducer(action, currentState){
if(action.type === 'INCREASE') {
return currentState + 1;
}
return currentState;
}

13. const currentState = 0;
const action = {type: 'INCREASE'};
function reducer(action, currentState){
if(action.type === 'INCREASE') {
return currentState + 1;
}
return currentState;
}

14. HOW TO USE REDUX

15. REDUX IS A
TINY LIBRARY
which contains a function for creating a store,
and 4 other helpers functions that we can use.

16. import { createStore } from 'redux';
const store = createStore(reducer);

17. import { createStore } from 'redux';
const store = createStore(reducer);

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

19. THE STORE IS SIMPLE
TO UNDERSTAND
we can implement a working store
in less then 30 lines of code.

20. 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 () {
let index = listeners.indexOf(listener);
listeners.splice(index, 1)
}
}
dispatch({ type:’@@INIT' });
return { getState, dispatch, subscribe }
}

21. CONNECTING THE
DOTS
now we can dispatch actions and be notified
when the state has changed.

22. dispatch
getState
STATE
ACTION
STOREUI

23. UI IS RENDERED
SOMETHING HAPPENED
ACTION DISPATCHED
STATE CHANGED
UI IS RENDERED
SOMETHING HAPPENED
ACTION DISPATCHED
STATE CHANGED
SOMETHING HAPPENED

24. UNI-DIRECTIONAL
DATA FLOW
sync flow

25. { LIVE CODING }
let’s build a traffic light and see
redux in action!

26. INTERCEPTING THE
ACTION FLOW
this is done using middleware which can catch
the action before they hit the store.
async flow

27. STATE
ACTION
STOREUI
Middlewae

28. { LIVE CODING }
implementing a simple logger
as a middleware.

29. ANGULAR & REDUX

30. JUST THE VIEW
api as actions
logic in middlewares & reducers
state inside a store

31. ANGULAR APP IS A
TREE OF COMPONENTS
each component is responsible for rendering a
a pert of the state, or dispatching actions.

32. CONTAINER
COMPONENT COMPONENT
STORE
[properties] (events)
actions
state

33. BINDING COMPONENTS
TO THE STORE
it’s straightforward but requires a lot of
boilerplate inside the component class.

34. NPM TO THE RESCUE!
FIND AN ADAPTOR
I will use the ‘angular2-redux-bindings’
for this example

35. class TodoListComponent {
constructor(){
this.unsubscribe = store.subscribe( () => this.renderList )
}
ngOnInit(){
this.renderList()
}
ngOnDestroy(){
this.unsubscribe()
}
addItem(item){
store.dispatch({
type: 'ADD_ITEM',
payload: item
})
}
renderList(){
this.list = store.getState().list;
}
}

36. class TodoListComponent {
@MapState('list')
private list;
@BindActions(addItem)
private addItem;
}

37. { LIVE CODING }
let’s build the view layer using
Angular2 components

38. NEXT STEPS

39. PLAY WITH THE DEMO
https://github.com/nirkaufman/angular-redux-demo

40. Angular & Redux Workshop
https://leanpub.com/redux-book
REDUX BOOK

41. Angular & Redux Workshop
FURTHER READING
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

42. THANK YOU!

43. Read our blog:
http://blog.500tech.com
NIR KAUFMAN
nir@500tech.com
Head of Angular Development @ 500Tech