A demonstration in implementing the Flux architecture with React, using Node, Gulp, Browserify, and Reactify. The target is a generic catalog and shopping cart interface.
Actions contain data and an identifying type property:
var AppActions = {
addItem: function(item) {
AppDispatcher.handleViewAction({
actionType: AppConstants.ADD_ITEM,
item: item
});
},
...
};
The dispatcher manages all data flow:
var AppDispatcher = assign(Dispatcher.prototype, {
handleViewAction: function(action) {
console.log('action', action);
this.dispatch({
source: 'VIEW_ACTION',
action: action
});
},
...
});
Stores contain the application state and logic:
function _addItem(item) {
if (!item.inCart) {
item.qty = 1;
item.inCart = true;
_cartItems.push(item);
} else {
_cartItems.forEach(function(cartItem, i) {
if (cartItem.id === item.id) {
_increaseItem(i);
}
});
}
}
var AppStore = assign(EventEmitter.prototype, {
emitChange: function() {
this.emit(CHANGE_EVENT);
},
addChangeListener: function(callback) {
this.on(CHANGE_EVENT, callback);
},
removeChangeListener: function(callback) {
this.removeListener(CHANGE_EVENT, callback);
},
getCart: function() {
return _cartItems;
},
getCatalog: function() {
return _catalog;
},
dispatcherIndex: AppDispatcher.register(function(payload) {
var action = payload.action;
switch(action.actionType) {
case AppConstants.ADD_ITEM:
_addItem(payload.action.item);
break;
...
}
AppStore.emitChange();
return true
})
});
- Fork it
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request