This document discusses several architectural patterns for unidirectional data flow in web applications, including Command Query Responsibility Segregation (CQRS), Flux, and Redux. It provides overviews and explanations of CQRS, which separates commands and queries; Flux, Facebook's application architecture; and Redux, a predictable state container for JavaScript apps. It also includes links to additional resources on these patterns.

1. Unidirectional
Data Flow
by Denis Gorbunov

3. CQS
Command Query Separation

4. • Queries: Return a result and do not change the
observable state of the system (are free of side effects).
• Commands (modifiers): Change the state of a system
but do not return a value.
http://martinfowler.com

5. CQS

6. CQRS
Command Query Responsibility Segregation

7. Command query responsibility segregation (CQRS)
applies the CQS principle by using separate Query and
Command objects to retrieve and modify data,
respectively.
http://udidahan.com

8. CQRS

9. CQRS

11. MVC and Flux

12. MVC

13. MVC

14. MVC

16. Flux

17. Flux

18. Flux

19. Flux

20. Simple Demo

36. Redux is a predictable state container for JavaScript apps.
http://redux.js.org

37. http://redux.js.org
Redux: Three Principles
• Single source of truth
• State is read-only
• Changes are made with pure functions

38. Redux

39. Redux

40. Redux

41. Redux: Store
http://redux.js.org

42. Redux: Action
http://redux.js.org

43. Redux: Reducer
http://redux.js.org

44. Redux: combineReducers
http://redux.js.org

45. Redux: combineReducers

46. Resources
• http://martinfowler.com/bliki/CommandQuerySeparation.html
• http://martinfowler.com/bliki/CQRS.html
• http://martinfowler.com/eaaDev/EventSourcing.html
• https://www.exclamationlabs.com/blog/the-case-for-unidirectional-data-flow/
• http://jaysoo.ca/2015/02/06/what-the-flux/
• https://github.com/reactjs/redux/issues/351
• https://facebook.github.io/flux/docs/overview.html
• http://squirrel.pl/blog/2015/08/31/introduction-to-event-sourcing-and-
command-query-responsibility-segregation/
• https://msdn.microsoft.com/en-us/library/jj554200.aspx
• https://github.com/reactjs/redux
• http://blog.angular-university.io/angular-2-application-architecture-building-
flux-like-apps-using-redux-and-immutable-js-js/
• https://medium.com/google-developer-experts/angular-2-introduction-to-
redux-1cf18af27e6e#.k1wlv92e2
• https://vsavkin.com/managing-state-in-angular-2-applications-

47. The End