β

在React App中使用Flux

日志@十七蝉 171 阅读

Flux Facebook 推出的一种应用程序架构,用于构建客户端Web应用。Flux使用一种名为 单向数据流 的模式,比传统的 MVC 模式简明。

我在 《使用Gulp转换React的JSX》 示例基础上,增加了提交新评论的功能,并使用了 Flux ,用来说明 Flux 的基本使用。

示例代码: https://github.com/MarshalW/ReactDemos/tree/comment-m5

运行示例:

下面说下实现的步骤。

对所需库文件的处理

使用 Browserify Gulp 可以很方便的加载Flux+React所需的库:

将这些加入到`package.json’文件中,并通过下面命令安装:

npm install

在js文件中引用所需的库,见 js/comments.js

var React = require('react');
var Dispatcher = require('flux').Dispatcher;
var EventEmitter = require('events').EventEmitter;
var assign = require('object-assign');

然后,通过 gulp 命令生成单一的js文件: bundle.js

html代码(见 comments.html )中只引用 bundle.js 即可:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="content"></div>
<script src="http://blog.shiqichan.com/Building-React-Apps-with-Flux/js/bundle.js"></script>
</body>
</html>

使用Flux

如上介绍的,本示例依赖这些库:

Dispatcher,点击 提交 按钮时,用于广播事件

代码见 js/comments.js

创建 Dispatcher

var AppDispatcher=new Dispatcher();

这个对象是全局唯一的。

当表单提交时:

var CommentForm = React.createClass({
handleSubmit: function(e) {
e.preventDefault();
var title = this.refs.title.getDOMNode().value.trim();
var content = this.refs.content.getDOMNode().value.trim();
if (!title || !content) {
return;
}
this.refs.title.getDOMNode().value = '';
this.refs.content.getDOMNode().value = '';

AppDispatcher.dispatch({
eventName: 'new-item',
newItem:{title: title, content: content}
});
return;
},

使用’AppDispatcher.dispatch(..)’方法广播一个事件:添加新的评论条目( new-item )。

Store,用于存储评论的集合

Flux 第二个概念是’Store’,用于处理实际的业务逻辑和数据,比如存储/返回评论对象的集合:

var CommentStore=assign({}, EventEmitter.prototype, {
items:[
{
title:'不错,超级满意',
content:'样子漂亮,买之前还在担心有什么问题,是我多想了,很实用,很好'
},
{
title:'还不错',
content:'送人的礼物,很满意的购物'
}
]
});

这里通过 assign ,让 CommentStore 对象混入( mixin EventEmitter 的函数。

在这里注册一个回调,用来收听到所有 Dispatcher 的广播:

AppDispatcher.register(function(payload){
switch( payload.eventName ) {
case 'new-item':
CommentStore.items.push( payload.newItem );
CommentStore.emit('change');
break;
}
return true;
});

并根据 eventName 过滤出自己所需的事件,做了如下事情:

view对数据变化的响应

在React view(视图)的代码中:

var CommentBox=React.createClass({
getInitialState: function() {
var self=this;
CommentStore.on('change',function(){
self.setState(CommentStore.items);
});
return {data:CommentStore.items};
},

监听 change 事件,如果发生,就通过 setState 方法重新设置数据。React发现State变化了,会重新绘制(render)该视图。

本文参考了以下内容

如下:

Flux Facebook 推出的一种应用程序架构,用于构建客户端Web应用。Flux使用一种名为 单向数据流 的模式,比传统的 MVC 模式简明。

我在 《使用Gulp转换React的JSX》 示例基础上,增加了提交新评论的功能,并使用了 Flux ,用来说明 Flux 的基本使用。

示例代码: https://github.com/MarshalW/ReactDemos/tree/comment-m5

运行示例:

下面说下实现的步骤。

作者:日志@十七蝉
借助文字,一个人可以向众人说话,死者可以向生者说话,生者可以向未生者说话。
原文地址:在React App中使用Flux, 感谢原作者分享。

发表评论