reflux react 例子

前端使用了reflux react 

后端用的是express mongoose 来写的api接口。

//创建动作
			var TodoActions=Reflux.createActions([
				'getAll',
				'addItem',
				'deleteItem',
				'updateItem'					
			]);
			var TodoStore=Reflux.createStore({
				items:[],
				listenables:[TodoActions],
				onGetAll:function(data){
					console.log('onGetAll id=',data);
					$.get('http://localhost:3001/todo',data,function(res){		
						console.log(res);				
						if(res.data.length>0){
							this.items=res.data;							
							this.trigger(this.items)
						}
					}.bind(this))					
				},
				onAddItem:function(model){
					console.log('onAddItem',model);
					$.post('http://localhost:3001/todo',model,function(res){
						console.log(res);
						if(res.data){
						 	this.items.push(res.data);					
							this.trigger(this.items);
						}						
					}.bind(this))
					
				},onDeleteItem:function(model){
					console.log('deleteItem',model);
					$.get('http://localhost:3001/todo/delete/'+model._id,model,function(res){		
						console.log(res);				
						if(res.data.ok){
							this.itemdelete(model)	
							this.trigger(this.items)
						}
					}.bind(this))	
				},onUpdateItem:function(model){
					console.log('onUpdateItem',model);	
					$.post('http://localhost:3001/todo/'+model._id,model,function(res){
						console.log(res);
						this.itemupdate(model._id,model);
						this.trigger(this.items)
					}.bind(this))		
				},itemdelete:function(model){
					var index=0;
					for(var i=0;i<this.items.length;i++){
						if(this.items[i]._id==model._id){
							index=i;
						}
					}
					this.items.splice(index,1);
				},itemupdate(id,model){
					for(var i=0;i<this.items.length;i++){
						if(this.items[i]._id==id){
							this.items[i].name=model.name;
							this.items[i].age=model.age;
						}
					}
				}
			})

			//函数内对数据进行过滤。return 真表示显示。
			//list 表示数据存在state.list内	
			var TodoComponent=React.createClass({
				mixins:[
					Reflux.connectFilter(TodoStore,'list',function(list){
						console.log(list);
						return list.filter(function(item){
							return item.age >0;
						})
					})
				],
				getInitialState:function(){
					return {list:[],obj:{name:'',age:''}}
				},
				componentDidMount:function(){					
        			TodoActions.getAll({pid1:123,pid2:141});
				},
				onChangeText:function(ev){
					//this.setState({text:ev.target.value});
					//最新的refs获取标签不需要getDOMNode()了
					this.setState({obj:{name:this.refs.reftext.value}})
				},
				addItem:function(model){					
					TodoActions.addItem(model);
				},
				deleteItem:function(model){
					TodoActions.deleteItem(model);
				},
				updateItem:function(model){
					//console.log('delete',model)
					TodoActions.updateItem(model);
				},
				render:function(){
					var els=[];
					this.state.list.map(function(item,index){
						els.push(<ItemCom data={item}  key={item._id}  fndelete={this.deleteItem} fnupdate={this.updateItem}/>)
					}.bind(this))
					return (
						 <div>
			               {els}
			               <ItemComAdd fnadd={this.addItem}/>
			                	                
			            </div>	
					);
				}
			})
			var ItemComAdd=React.createClass({
				getInitialState:function(){
					return {name:'',age:''}
				},
				onChangeText:function(){
					this.setState({name:this.refs.refname.value,age:this.refs.refage.value})
				},
				onAddItem:function(){
					this.props.fnadd(this.state);
					this.setState({name:'',age:''});
				},
				render:function(){
					return (
						<div>
							name:<input type="text" value={this.state.name} onChange={this.onChangeText}  ref="refname" /> <br/>
							age:<input type="number" value={this.state.age} onChange={this.onChangeText}  ref="refage" /> 
			                <button onClick={this.onAddItem}>添加</button>		
						</div>
					);
				}
			})
			var ItemCom=React.createClass({
				getInitialState:function(){
					return {name:'',age:'',hide:0,_id:this.props.data._id}
				},
				onDelete:function(){
					this.props.fndelete(this.props.data);
				},
				onUpdate:function(){
					this.setState({hide:1,name:this.props.data.name,age:this.props.data.age});
				},
				onChangeText:function(){					
					this.setState({name:this.refs.refname.value,age:this.refs.refage.value})
				},
				onUpdatePost:function(){
					this.props.fnupdate(this.state);
					this.setState({hide:0})
				},
				render:function(){
					var stylediv={display:this.state.hide==1?'none':'block'};
					var stylediv1={display:this.state.hide==1?'block':'none'};
					return (
						<div>
							<div style={stylediv}>
								name:<span>{this.props.data.name}</span>&nbsp;
								age:<span>{this.props.data.age}</span>
								<button onClick={this.onDelete}>delete</button>
								<button onClick={this.onUpdate}>修改</button>								
							</div>
							<div style={stylediv1} >
								<input type="text" value={this.state.name} ref="refname" onChange={this.onChangeText} />
								<input type="number" value={this.state.age} ref="refage" onChange={this.onChangeText} />
								<button onClick={this.onUpdatePost}>修改</button>
							</div>
						</div>	
					);
				}
			})
			

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

在store上编写了获取 删除 修改 添加的方法。并同步到服务器。

在请求完成后才执行的修改store上数据和触发trigger 回调。

在组件内过滤掉了age<0 的。

组件方法内操作数据都通过动作方法实现的。

组件内有两个子组件，一个是对数据的修改和删除，一个是添加。

store只绑定在了顶级组件上，动作也是。

子组件的数据和方法通过 props传递的。子组件有自己的状态。

这样实现了数据和动作只在顶级组件上绑定。子级都是继承下来的。

子级不用再去实现数据和动作了。它只需使用传递的数据和方法就可以了。

这样也好管理。