[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
[Flux] Stores的更多相关文章
- Flux 普及读本
话说当时做 APP 时,三月不知肉味,再次将眼光投放前端,有种天上一天,地下一年的感觉. Flux 是一种思想 了解的最好方式当然是看Flux官方文档了.React 中文站点也能找到对应的翻译版本,但 ...
- redux+flux(一:入门篇)
React是facebook推出的js框架,React 本身只涉及UI层,如果搭建大型应用,必须搭配一个前端框架.也就是说,你至少要学两样东西,才能基本满足需要:React + 前端框架. Faceb ...
- 【原】flux学习笔记
最近React(web/native)依旧如火如荼,相信大家都跃跃欲试,入职新公司,现在的团队也开始在React领域有所尝试. 2016年应该是React 逐渐走向成熟的一年.之前在原来公司搞不懂的问 ...
- 【go】脑补框架 Express beego tornado Flux reFlux React jsx jpg-ios出品
http://goexpresstravel.com/ 今天 Express 的作者 TJ Holowaychuk 发了一篇文章,正式宣告和 Node.js 拜拜了,转向 Go 语言. Go vers ...
- [Flux] 2. Overview and Dispatchers
Flux has four major components: Stores, Dispatchers, Views, and Actions. These components interact l ...
- Flux
Ken Wheeler 构建React 应用的一套架构. 应用程序架构, 单向数据流方案. Dispatcher 的开源库. 一种全局pub/sub 系统的事件处理器, 用于 向所注册的加调函数 ...
- 使用 React 和 Flux 创建一个记事本应用
React,来自 Facebook,是一个用来创建用户界面的非常优秀的类库.唯一的问题是 React 不会关注于你的应用如何处理数据.大多数人把 React 当做 MV* 中的 V.所以,Facebo ...
- Flux demo
Flux demo Introduction flux应用架构如下图所示,本文并不是讲述怎么立即做一个酷炫的应用,而是讲述如何依照这种框架,来进行代码的组织.我们先把这个流程转述为文字:抛开与webA ...
- Flux是一个Facebook团队的前端开发架构
Flux是一个Facebook团队的前端开发架构 Flux introduction 本文组成: React 官方文档翻译 相关实践心得. 内容上是Flux的介绍,例子将会在以后写出.一旦稍微多了解一 ...
随机推荐
- ios开发相关网站
1.苹果开发者中心(ios Dev Center):最权威的学习ios开发的地方,提供ios开发所能用到的所有内容(包含文档.指南以及实例代码). https://developer.apple.co ...
- Windows的命令行怎么支持通配符
摸索出一个小技巧,虽然Windows的命令行本身不支持通配符,但可以在脚本里把传进来的参数当通配符用 只要加上@ARGV = glob "@ARGV";就行了 @ARGV = gl ...
- javaScript 的option触发事件
先说jquery的option触发事件,很方便 $("option:selected")//这样就能直接触发选择的option了 在JavaScript中就显得比较麻烦,其实< ...
- DBCONN
package Ulike_servlet; //将该类保存到com.tools包中import java.sql.Connection;import java.sql.DriverManager;i ...
- 与 空格的区别
nbsp 是 Non-Breaking SPace的缩写,即“不被折断的空格”,当两个单词使用 连接时,这两个单词就不会被分隔为2行,如下面 <div id="div1" ...
- 详解函数声明VS函数表达式
函数声明 比方如下:1.我们以一个完整的语句以function开头,不加任何东西. 2.有一个函数名(add) 3.参数可带可不带(x,y) 4.有一个数体 满足以上要求的我们统称为函数声明! 附加小 ...
- Android编译输出 资源指定AAPT
BoardConfigCommon.mk # Default Command lineSEC_DEV_APP_LOCAL_AAPT_FLAGS := -c sw360dpSEC_DEV_FRAMEWO ...
- TRECT的使用
作为一张画布,在上面绘制各种图形或显示图像,但在CANVAS的使用过程中少不了一个特殊对象,那就是矩形RECT,灵活使用它会完成很多特殊的功能,为Delphi编制的Windows程序增加活力. REC ...
- python 编程之计算器
作业: 使用正则表达式和递归实现计算器功能. 实现: 1.实现带括号的计算 2.实现指数.加减乘除求余等功能 一.实例说明: 本实例自己写了个版本,但依旧存在一点bug,例:-2-2等计算问题,故最后 ...
- Django db relationship
# coding=utf-8 from django.db import models """ Django数据库关系: 一对一关系:OneToOneField 多对多关 ...