[Flux] Stores
Store, in Flux which manager the state of the application.
You can use EventEmiiter to listen to the change to state.
import {dispatch, register} from '../dispatchers/app-dispatcher'; import AppConstants from '../constants/app-constants'; import { EventEmitter } from 'events'; const CHANGE_EVENT = 'change' /** * Init the data: Start */ var _catalog = []; for ( let i = 1; i < 9; i++ ) { _catalog.push( { 'id': 'Widget' + i, 'title': 'Widget #' + i, 'summary': 'A great widget', 'description': 'Lorem ipsum dolor sit amet.', 'cost': i } ); } /** * Init the data: End */ /** * Manager the CRUD: Start */ var _cartItems = []; const _removeItem = ( item ) => { _cartItems.splice( _cartItems.findIndex( i => i === item ), 1 ); }; const _findCartItem = ( item ) => { return _cartItems.find( cartItem => cartItem.id === item.id ) }; const _increaseItem = ( item ) => item.qty++; const _decreaseItem = ( item ) => { item.qty--; if ( item.qty === 0 ) { _removeItem( item ) } }; const _addItem = ( item ) => { const cartItem = _findCartItem( item ); if ( !cartItem ) { _cartItems.push( Object.assign( {qty: 1}, item ) ); } else { _increaseItem( cartItem ); } }; const _cartTotals = ( qty = 0, total = 0 ) => { _cartItems.forEach( cartItem => { qty += cartItem.qty; total += cartItem.qty * cartItem.cost; } ); return {qty, total}; }; /** * Manger the CRUD: END */ /** * AppStore Class, handle the request from dispatcher * @type {*} */ const AppStore = Object.assign(EventEmitter.prototype, { emitChange(){ this.emit( CHANGE_EVENT ) }, addChangeListener( callback ){ this.on( CHANGE_EVENT, callback ) }, removeChangeListener( callback ){ this.removeListener( CHANGE_EVENT, callback ) }, getCart(){ return _cartItems; }, getCatalog(){ return _catalog.map(item => { return Object.assign( {}, item, _cartItems.find( cItem => cItem.id === item.id)) }) }, getCartTotals(){ return _cartTotals(); }, dispatcherIndex: register( function( action ){ switch(action.actionType){ case AppConstants.ADD_ITEM: _addItem( action.item ); break; case AppConstants.REMOVE_ITEM: _removeItem( action.item ); break; case AppConstants.INCREASE_ITEM: _increaseItem( action.item ); break; case AppConstants.DECREASE_ITEM: _decreaseItem( action.item ); break; } AppStore.emitChange(); }) }); export default AppStore