zoukankan      html  css  js  c++  java
  • [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
  • 相关阅读:
    关于 Lazy<T>
    silverlight 模仿淘宝预览图片
    自动安装silverlight,类似flash自动安装
    来说说mask吧
    笔试题n! 末尾0的个数
    VueCLI和脚手架(原创)
    REST构架风格介绍之一:状态表述转移(ZZ)
    VSS2005的配置(转载)
    ArcGIS9.2安装与.NET简单使用(zz 简单且有用)
    ASP.NET内置对象(7个)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4965795.html
Copyright © 2011-2022 走看看