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传递的。子组件有自己的状态。

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

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

这样也好管理。