[Flux] Stores

最新推荐文章于 2021-05-25 18:12:27 发布

转载最新推荐文章于 2021-05-25 18:12:27 发布 · 53 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/4965795.html

本文介绍了一个使用Influx的应用状态管理Store实现，该Store通过EventEmitter监听状态变化，并利用Dispatcher处理来自不同组件的动作请求，实现了商品目录及购物车的增删改查功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

转载于:https://www.cnblogs.com/Answer1215/p/4965795.html