@alex.n.moldovan
medium.com/@alexnm
Two-way Binding
View-Models / Controllers
"Code behind"
Event
Emitter
State
Presentation
Stores
Dispatcher
Actions
Views
Dispatcher.dispatch( { type: "INCREMENT" } );
Dispatcher.register( function( action ) {
switch ( action.type ) {
case "INCREMENT":
counter++;
Store.emitChange( );
break;
case "DECREMENT":
counter--;
Store.emitChange( );
}
}
Demo app: https://github.com/alexnm/counter-flux
React.js
Product Store
Cart Store
Dispatcher
dispatch
emit
emit
dispatch
dispatch
Dispatcher
Stores
Action Creators
ADD_TO_CART
API Endpoint
request
response
ADD_TO_CART_COMPLETED
X
Store
Dispatcher
Action
View
Stores
Store
Action
View
Reducer
Separation of Concerns
One-way Flows
Visibility
Scalability
Synchronizing Events
Server Side Rendering
Over-engineering
Changing Standards
@alex.n.moldovan
medium.com/@alexnm