React.js留言板（Flux结构实现）

本篇文章介绍的一个Flux架构下实现的留言板，实现列表查看和新添留言功能，此留言板是根据基于React.js实现的留言板（无Flux架构思想）进行的改造，之前使用React.js实现了留言板的列表显示和新增留言功能（关键代码不到200行），想查看的话移步访问http://blog.csdn.net/liu942626/article/details/69063029，本次是在学习了Flux结构之后，对Flux实现React.js留言板的尝试，github地址：https://github.com/liu942626/MessageBoard-Flux。

React 本身只涉及UI层，如果搭建大型应用，必须搭配一个前端框架。也就是说，你至少要学两样东西，才能基本满足需要：React + 前端框架。学习React的话，假如你已经掌握了React.js的入门知识，建议看下阮一峰老师的http://www.ruanyifeng.com/blog/2016/01/flux.html  Flux架构入门教程，个人感觉通俗易懂，一看就会，也是根据这个改的自己的留言板，本文也不再详细介绍flux架构的具体实现，只对留言板的实现进行说明。

接下来是留言板的一些介绍：

一、程序亮点：
React+Flux实现；
Mock.js假数据填充，无需任何后台，即开即用(浏览器直接打开/dist/html/index.html即可访问)；
手打超多注释。

二、文件结构（代码在src中）：
/assets 下放置依赖文件（jquery以及bootstrap）；
/css 下index.css自定义样式，/img放置的是置顶图片；
/html 下index.html界面；
/js：
    /react（体现Flux架构的文件）：
        /actions下 动作；
        /dispatcher下 分发器；
        /stores下 存储；
        /index.js 视图。
    mock.value.js 假数据填充。

三、功能实现：

Flux 的最大特点，就是数据的"单向流动"。

1. 用户访问 View
2. View 发出用户的 Action
3. Dispatcher 收到 Action，要求 Store 进行相应的更新
4. Store 更新后，发出一个"change"事件
5. View 收到"change"事件后，更新页面

上面过程中，数据总是"单向流动"，任何相邻的部分都不会发生数据的"双向流动"。这保证了流程的清晰。

以下介绍初始化加载列表的流程（只粘贴了部分代码，完善代码可以在github中进行下载,流程按照数字进行顺序发生，数据流动view-action-dispatcher-store-view）：

1）view视图

// 留言板总体模块
var MessagePanel = React.createClass({
    getInitialState: function(){ // 初始化数据
        return ListStore.getAll(); // 直接调用的store模块获取数据
    },
    _onChange: function(){
        this.setState(
            ListStore.getAll() // 10、获取store模块的值，12、将获取值赋值到state，view视图刷新
        );
    },
    listContent: function(){ // 3、ajax获取后台数据
        var that = this;
        $.ajax({
            type: 'get',
            url: '/get',
            dataType: 'json'
        }).done(function(resp){
            if('success' === resp.status){
                ButtonActions.refreshList(resp.data); // 4、获取数据后，action模块
            }
        }.bind(that));
    },
    componentDidMount: function(){ // 1、初始化加载界面获取列表
        ListStore.addChangeListener(this._onChange); // 2、绑定获取数据方法
        this.listContent(); // 3、ajax获取后台数据
    },
    render: function(){
        return (
            <div>
                <div className="col-xs-2">
                </div>
                <div className="col-xs-8">
                    <MessageList data={this.state.list} />
                    <MessageAlert alert={this.state.text}/>
                </div>
                <div className="col-xs-2">
                </div>
            </div>
        );
    }
});

2）action模块

var ButtonActions = {
  refreshList: function (list) { // 5、更新留言列表
    AppDispatcher.dispatch({
      actionType: 'REFRESH_LIST', // 6、dispatcher模块分发
      list: list
    });
  }
};

3）dispatcher模块

AppDispatcher.register(function(action){
    switch(action.actionType){ //通过不同的actionType更新不同数据
        case 'REFRESH_LIST':
            ListStore.refreshListHandler(action.list); // 7、调用store模块方法
            ListStore.emitChange(); // 9、触发绑定的change监听
            break;
       default:
            // noDefault;
    }
})

4）store模块

var ListStore = assign({},EventEmitter.prototype,{
    items: {
        list: [],
        text: ''
    },
    
    getAll: function() { // 11、获取store模块中的items值
        return this.items;
    },
    
    refreshListHandler: function(list) { // 8、刷新留言列表
        this.items.list = list;
    },
    
    emitChange: function() { // 触发change监听，调用change绑定的函数
        this.emit('change');
    },
    
    addChangeListener: function(callback) { // chang监听绑定函数
        this.on('change',callback);
    },
    
    removeChangeListener: function(callback) { // change监听解绑
        this.removeListener('change',callback);
    }
});

四、其他说明：
github地址：https://github.com/liu942626/MessageBoard-Flux下载后使用npm install下载安装package.json中的依赖，而后使用gulp指令拷贝文件；
gulpfile.js实现功能是文件拷贝以及src/js/react下js文件的转码（es6转换）压缩，如有更多需求还自行修改此文件。