UnidirectionalData Flow

by Denis Gorbunov

CQSCommand Query Separation

• 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

CQS

CQRSCommand Query Responsibility Segregation

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

CQRS

CQRS

MVC and Flux

MVC

MVC

MVC

Flux

Flux

Flux

Flux

Simple Demo

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

http://redux.js.org

Redux: Three Principles• Single source of truth• State is read-only• Changes are made with pure functions

Redux

Redux

Redux

Redux: Store

http://redux.js.org

Redux: Action

http://redux.js.org

Redux: Reducer

http://redux.js.org

Redux: combineReducers

http://redux.js.org

Redux: combineReducers

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

ata-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-an

d-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-introducti

on-to-redux-1cf18af27e6e#.k1wlv92e2• https://vsavkin.com/managing-state-in-angular-2-applications-caf78

d123d02#.92aubeqeh

The End