This document discusses using Redux for data flow in Angular applications. Redux is a pattern that uses a single state tree and pure reducer functions to update state in response to actions. It advocates for single sources of truth, immutable state, and changes through pure functions. The ng2-redux library allows integrating Redux with Angular by providing the store via dependency injection and dispatching actions. Components can select state slices and dispatch actions to update state.

2. REDUX DATA FLOW WITH
ANGULAR

3. SPAs Are Complex

4. Service
Component
Service
ComponentComponent

5. Service
Component
Service
ComponentComponent
Component
Component
Service
Service Component
Service

6. Service
Component
Service
ComponentComponent
Component
Component
Service
Service Component
Service
Service
Component
Service
ComponentComponent
Component
Component
Service
Service Component
Service
Service
Component
Service
ComponentComponent
Component
Component
Service
Service Component
Service

7. Then you make a small change…

9. 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

10. Agenda
• The Redux pattern
• Combining Redux and Angular
• ng2-redux library in a nutshell

11. Known SPA Complexity Solutions
• Command Query Responsibility Segregation (CQRS)
• Event Sourcing
• Flux
• And more

12. Redux
• Design pattern based on Flux
• But it’s not Flux!
• Predictable state container for JavaScript apps

13. Redux Principles
1. Single source of truth

14. Single Source of Truth
• The application state is stored in an object tree within a single store
let state = store.getState();

15. Redux Principles
1. Single source of truth
2. State is read-only

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

17. Redux Principles
1. Single source of truth
2. State is read-only
3. Changes are made with pure functions

18. 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;
}
}

19. Let’s drill down

20. Redux Actors
Action
Creators
View
ReducersStore

21. 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. Action Creators
• Functions that return actions
const ADD_GROCERY_ITEM = 'ADD_GROCERY_ITEM';
function addGroceryItem(item) {
return {
type: ADD_GROCERY_ITEM,
item: item
};
}
Action
Creators

23. 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

24. 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

25. Redux Data Flow
Action
Creators
View
ReducersStore
interaction (click, mouse etc.)
dispatch(action) (previous state, action)
(new state)
(current state)

26. Redux Data Flow – Cont.
Action
Creators
View
ReducersStore
interaction (click, mouse etc.)
dispatch(action) (previous state, action)
(new state)
(current state)
Outside Action
(push, Ajax callback
and etc.)

27. Redux Library API
• Redux is a small and compact library:
• createStore(reducer)
• combineReducers(reducers)
• applyMiddleware(middlewares)
• compose(functions)
• bindActionCreators(creators, dispatch)
• Store API:
• store.dispatch(action)
• store.getState()
• store.subscribe(listener)

28. DEMO: REDUX IN ACTION

29. 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));

30. DEMO: REDUX MIDDLEWARE

31. WHAT ABOUT ANGULAR?

32. 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
https://github.com/angular-redux/ng2-redux
npm install --save ng2-redux

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

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

36. DEMO: REDUX + ANGULAR

37. Summary
• Redux
• Is a data flow design pattern
• Reduces complexity when building big SPAs
• Can be applied in Angular apps

38. Resources
• Redux:
https://github.com/reactjs/redux
• ng2-redux:
https://github.com/angular-redux/ng2-redux
• ngrx/store:
https://github.com/ngrx/store
• My Blog – http://www.gilfink.net
• Follow me on Twitter – @gilfink

39. Thank You!