Slides from the "Data flow architecture in angular2 with redux". Introduction to Redux, it's inspirations and implementation. Join the "AngularJS-IL" meetup group for more community events and workshops! (http://www.meetup.com/AngularJS-IL/events/229660127/)

1. DATA FLOW
ARCHITECTURE IN
ANGULAR2 WITH REDUX
Nir Kaufman
Deep dive into the pattern & implementation

2. NIR KUFMN
Nir Kaufman
- Doing Angular for years
- Wrote a book about Angular2
- Plays the electric Bass
Head of Angular Development @ 500Tech
*This picture has been retouched.
The actual speaker may look different

4. SPEAK.ANGULAR.CO.IL

5. /user/AngularJSIL

6. AGENDA
• The basics
• Redux overview & API
• Coffee break
• Project structure - Angular2 / Redux
• Implementing common scenarios
• Next steps

7. THE CHALLENGE

8. SPA BECOME INCREASINGLY
COMPLICATED

10. EVER-CHANGING
STATE

11. EVERYTHING IS
CONNECTED
TO EVERYTHING

12. COMPONENT
SERVICE

13. COMPONENT
SERVICE
COMPONENT
SERVICE
COMPONENT
SERVICE

14. COMPONENT
SERVICESERVICES
SERVICE
SERVICE
SERVICE
SERVICE
COMPONENTSERVICE
SERVICE
COMPONENT

15. CHANGING SOMETHING
BREAKS
SOMETHING SOMEWHERE

16. SOLUTIONS

17. CQRS*
Use a different model to update information than
the model you use to read information
*Command Query Responsibility Segregation

18. EVENT SOURCING
Capture all changes to an application state as a
sequence of events.

19. UI
Commands
Model
Query Model
EVENT
STORE
STORE
(STATE)
EVENTS QUEUE
COMMANDS
QUERIES

20. STATELESS WEB
ARCHITECTURE
Dependent only on the supplied input
parameters.

21. IMMUTABLE OBJECT
An object whose state cannot be modified
after it is created.

22. ENTER REDUX

23. REDUX
Predictable state container for JavaScript apps.

24. SINGLE SOURCE
OF TRUTH
“The state of your whole application is stored in
an object tree within a single store”

25. THE STATE IS
READ ONLY
“The only way to mutate the state is to emit an
action, an object describing what happened.”

26. PURE FUNCTIONS
“To specify how the state tree is transformed by
actions, you write pure reducers.”

27. Every interaction with the view results with an action
that is sent to the store and mutates the state
ACTIONS
UI STATEACTION

28. The view doesn’t create the action. It calls a method
on an action creator that results with an action
ACTION CREATOR
UI STATEACTION
ACTION
CREATOR

29. The action hits a reducer that takes the state and
the action and produces a new state
REDUCER
UI
NEW
STATE
ACTION
ACTION
CREATOR
STATE
REDUCER

30. A middleware can catch an action before it hits the
reducer for applying async operations or other logic.
MIDDLEWARE
UI
NEW
STATE
ACTION
ACTION
CREATOR
STATE
REDUCER
MIDDLE
WARES

31. UI
MIDDLEWARES
ACTION
STATE REDUCER
ACTION
CREATOR
ACTION
DATA FLOW

32. REDUX IS
TINYONLY FIVE METHODS

33. THE STORE
store = createStore(reducer)
STATEREDUCER
dispatch(action) subscribe(listener)
getState()

34. ACTIONS & CREATORS
ARE JUST PLAIN OLD
JAVASCRIPT

35. ALL THE REST
combineReducers(reducers)
applyMiddleware(middlewares)
compose(functions)
bindActionCreators(creators, dispatch)

36. LIVE CODING
Exploring redux API
https://github.com/nirkaufman/redux-playground

37. ANGULAR 2 & REDUX

38. FOLDER STRUCTURE
Group by type, keep the UI in its own folder
src
components
actions
reducers
middleware
constants

39. ANGULAR BINDINGS
Convenience methods for cleaner code
UI state

40. NG2-REDUX
unsubscribe = connect(mapState,mapActions);
https://github.com/wbuchwalter/ng2-redux

41. LIVE CODING

42. STEP 1
THE TODO LIST

43. STEP 2REDUX DEVTOOLS

44. STEP 3LOGGER MIDDLEWARE

45. STEP 4ASYNC DATA FLOW

46. STEP 5ADDING REDO/UNDO

47. NEXT STEPS

48. RESOURCES
CQRS
• https://msdn.microsoft.com/en-us/library/dn568103.aspx
• http://martinfowler.com/bliki/CQRS.html
EVENT SOURCING
• https://msdn.microsoft.com/en-us/library/dn589792.aspx
REDUX DEV-TOOLS
• https://github.com/zalmoxisus/redux-devtools-extension
UNDO/REDO
• https://github.com/omnidan/redux-undo
REDUX
• http://redux.js.org/

49. THANKS!
Nir@500tech.com
@nirkaufman on twitter
slideshare.net/nirkaufman/
github.com/nirkaufman
All pictures belong
to their respective authors