reflux+react web 第一种写法

在页面中使用reflux react写项目：

通过bower 安装react babel reflux query

记得type="text/babel"

//创建动作
			var TodoActions=Reflux.createActions([
				'getAll',
				'addItem'					
			]);
			//store内监听action 设置items 数据
			//在监听内请求数据回调里设置store.items 并调用trigger并传递items
			var TodoStore=Reflux.createStore({
				items:[1,2],
				listenables:[TodoActions],
				onGetAll:function(data){
					console.log('onGetAll id=',data);
					$.get('http://weixin.ishangwo.cn/api/photopair/game',data,function(data){
						console.log(data);
						if(data){
							this.items=data.pics;							
							this.trigger(this.items)
						}
					}.bind(this))					
				},
				onAddItem:function(model){
					console.log('onAddItem',model);
					this.items.push(model);					
					this.trigger(this.items);
				}
			})

创建动作一个是获取数据一个是添加数据

store内用$.get获取数据，成功后修改store上数据并trigger(data)触发组件回调。

store上每个操作了数据的方法都需要调用trigger。

//在组件内设置默认state
			//第一次渲染后监听store.listen并传递回调方法  
			//
			//在销毁里取消对store的监听
			//回调里修改组件的state值。
			var TodoComponent=React.createClass({
				getInitialState:function(){
					return {list:[],text:''}
				},
				onStatusChange:function(list){
					this.setState({list:list})
				},
				componentDidMount:function(){
					this.unsubscribe = TodoStore.listen(this.onStatusChange);
        			TodoActions.getAll({pid1:123,pid2:141});
				},
				componentWillUnmount:function(){
					this.unsubscribe();
				},
				onChangeText:function(ev){
					//this.setState({text:ev.target.value});
					//最新的refs获取标签不需要getDOMNode()了
					this.setState({text:this.refs.reftext.value})
				},
				onAddItem:function(){
					var data={userName:this.state.text};
					TodoActions.addItem(data);
					this.setState({text:''})
				},
				render:function(){
					return (
						 <div>
			                {this.state.list.map(function (item,index) {
			                    return <p key={index}>{item.userName}</p>
			                })}
			                <input type="text" value={this.state.text} onChange={this.onChangeText}  ref="reftext" />
			                <button onClick={this.onAddItem}>添加</button>
			            </div>	
					);
				}
			})

			ReactDOM.render(<TodoComponent />,document.getElementById('app'))

组件的写法:

在第一次渲染完方法内监听store并指定回调方法。

马上就调用action.getall方法来获取数据并传递参数。

在销毁方法内取消监听。

在添加方法内调用action上的addItem添加数据到store.