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. mysql 连接问题----转载

    最近碰到一个mysql5数据库的问题.就是一个标准的servlet/tomcat网络应用,后台使用mysql数据库.问题是待机一晚上后,第二天早上第一次登录总是失败.察看日志发现如下错误: “com. ...

  2. zoj3839-Poker Face

    #include<cstdio>int n;void P(int i,int j,int n,int f){ if(i==n){ for(int k=1;k<=n;k++)print ...

  3. 【开源】前端练手笔记,Chrome扩展应用程序(html+CSS+JS) (1)

    项目名称:github-notification 项目地址:https://github.com/WQTeam/github-notification 说明:本人打算抽时间学习前端(html + cs ...

  4. Python学习 - 编写一个简单的web框架(二)

    在上一篇日志中已经讨论和实现了根据url执行相应应用,在我阅读了bottle.py官方文档后,按照bottle的设计重写一遍,主要借鉴大牛们的设计思想. 一个bottle.py的简单实例 来看看bot ...

  5. 【Java】Hibernate4实战 之 第一部分Hibernate入门

    Hibernate是什么:ORMapping的原理 Hibernate是轻量级的ORMapping框架. ORMapping基本规则: 类和表映射. 实例和数据库表中的一条数据映射. 实例的属性和数据 ...

  6. web 缓存

    http://robbinfan.com/blog/38/orm-cache-sumup http://my.oschina.net/ITBoy/blog/23683 http://www.kuqin ...

  7. 试玩GitHub

    SVN是可以,但GitHub越来越屌啊... SO...要玩起来.. 参考URL: http://jingyan.baidu.com/article/f7ff0bfc7181492e27bb1360. ...

  8. /dev/random和/dev/urandom的一点备忘

    1.  基本介绍 /dev/random和/dev/urandom是Linux系统中提供的随机伪设备,这两个设备的任务,是提供永不为空的随机字节数据流.很多解密程序与安全应用程序(如SSH Keys, ...

  9. Boolean类源码分析

    Boolean类里面的常量: Boolean.TRUE:这个是调用Boolean的构造函数,新建了一个Boolean对象,所以TRUE是Boolean类型的.用来避免每次都创建新的Boolean对象, ...

  10. 【HDOJ】2266 How Many Equations Can You Find

    简单DFS. #include <cstdio> #include <cstring> #define MAXN 15 char str[MAXN]; __int64 x; i ...