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

[Flux] Stores的更多相关文章

  1. Flux 普及读本

    话说当时做 APP 时,三月不知肉味,再次将眼光投放前端,有种天上一天,地下一年的感觉. Flux 是一种思想 了解的最好方式当然是看Flux官方文档了.React 中文站点也能找到对应的翻译版本,但 ...

  2. redux+flux(一:入门篇)

    React是facebook推出的js框架,React 本身只涉及UI层,如果搭建大型应用,必须搭配一个前端框架.也就是说,你至少要学两样东西,才能基本满足需要:React + 前端框架. Faceb ...

  3. 【原】flux学习笔记

    最近React(web/native)依旧如火如荼,相信大家都跃跃欲试,入职新公司,现在的团队也开始在React领域有所尝试. 2016年应该是React 逐渐走向成熟的一年.之前在原来公司搞不懂的问 ...

  4. 【go】脑补框架 Express beego tornado Flux reFlux React jsx jpg-ios出品

    http://goexpresstravel.com/ 今天 Express 的作者 TJ Holowaychuk 发了一篇文章,正式宣告和 Node.js 拜拜了,转向 Go 语言. Go vers ...

  5. [Flux] 2. Overview and Dispatchers

    Flux has four major components: Stores, Dispatchers, Views, and Actions. These components interact l ...

  6. Flux

    Ken Wheeler 构建React 应用的一套架构.  应用程序架构, 单向数据流方案. Dispatcher 的开源库.   一种全局pub/sub 系统的事件处理器, 用于 向所注册的加调函数 ...

  7. 使用 React 和 Flux 创建一个记事本应用

    React,来自 Facebook,是一个用来创建用户界面的非常优秀的类库.唯一的问题是 React 不会关注于你的应用如何处理数据.大多数人把 React 当做 MV* 中的 V.所以,Facebo ...

  8. Flux demo

    Flux demo Introduction flux应用架构如下图所示,本文并不是讲述怎么立即做一个酷炫的应用,而是讲述如何依照这种框架,来进行代码的组织.我们先把这个流程转述为文字:抛开与webA ...

  9. Flux是一个Facebook团队的前端开发架构

    Flux是一个Facebook团队的前端开发架构 Flux introduction 本文组成: React 官方文档翻译 相关实践心得. 内容上是Flux的介绍,例子将会在以后写出.一旦稍微多了解一 ...

随机推荐

  1. 百度编辑器ueditor如何配置

    完全版: 1.加载 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...

  2. jquery中的ajax方法详解

    定义和用法ajax() 方法通过 HTTP 请求加载远程数据.该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XML ...

  3. 同步异步GET和POST请求

    1.同步请求可以从因特网请求数据,一旦发送同步请求,程序将停止用户交互,直至服务器返回数据完成,才可以进行下一步操作, 2.异步请求不会阻塞主线程,而会建立一个新的线程来操作,用户发出异步请求后,依然 ...

  4. iOS开源项目

    在结束了GitHub平台上“最受欢迎的Android开源项目”系列盘点之后,我们正式迎来了“GitHub上最受欢迎的iOS开源项目”系列盘点.今天,我们将介绍20个在GitHub上非常受开发者欢迎的i ...

  5. 转:windows下使用gvim搭建简单的IDE编译环境(支持C/C++/Python等)

    原文来自于:http://www.cnblogs.com/zhuyp1015/archive/2012/06/16/2552269.html 使用gvim在windows环境下搭建简单的IDE环境可以 ...

  6. unix io 模型浅析

    POSIX中对同步IO和异步IO的规定: 同步IO操作:引起进程的阻塞直到IO操作完成,异步IO操作:IO操作不会引起进程阻塞 在UNIX下,有5中操作模型: 阻塞IO,非阻塞IO,IO复用,信号驱动 ...

  7. Ombrophobic Bovines

    poj2391:http://poj.org/problem?id=2391 题意:一个人有n个农场,每个农场都一个避雨的地方,每个农场有一些牛,每个避雨的地方能容纳牛的数量是有限的.农场之间有一些道 ...

  8. 蓝牙4.0BLE cc2540 usb-dongle的 SmartRF Packet Sniffer 抓取数据方法

    蓝牙4.0的开发, 现在真热火的很, 但是很多朋友买了我们出品的cc2540 usb-dongle后, 都反馈说不知道如何抓包, 并且, 即使很多朋友到TI官网论坛去找信息,不少朋友依然是无功而返,实 ...

  9. 如何给Qlabel添加clicked属性(覆盖mousePressEvent,处理QMouseEvent消息,反正是软绘制,想怎么样就怎么样)

    clickedLabel.h #ifndef CLICKLABEL_H #define CLICKLABEL_H #include <QLabel> #include <QMouse ...

  10. 在InnoDB,记录在 non-clustered indexes(也被称为secondary indexes) 包含了主键值

    In InnoDB, the records in non-clustered indexes (also called secondary indexes) contain the primary ...