学习reflux的总结

最近学习reflux,总结一下，方便以后回顾.
参考资料,我觉得这个是极品，但是demo无法正常运行.
1.reflux的原理:
1.1reflux是对flux架构的实现[flux相当于java中的架构/思想]；
1.2reflux中的数据流是单向的;
2.reflux和flux的重点区别:
2.1flux中的action是一个标准的信息载体【dataer】，并不具备publisher的功能；
2.2flux中的action是一个publisher，并具备信息载体的功能;
2.3reflux中的action被发送出去之后，只有订阅【监听了】了action的store中的回调函数才会被调用；
2.4flux中档action被发送后，所有注册在dispatcher上的回调函数都将被触发、调用我们通过action中type进行switch后才能进行指定的操作，执行效率较低;
3.reflux的demo:

action【action.js】

action中定义了组件的行，同时reflux中的action作为publisher存在，当action被触发【执行：action.actionName();】时将自动转发action[一般携带着数据]到订阅了[监听]该action的store中，该store中的onActionName()回调函数将会被调用;
----------


var Reflux = require('reflux');

var WorkLogActions = Reflux.createActions([
    'createHrWorkLog',
    'deleteHrWorkLog',
    'updateHrWorkLog',
    'retrieveHrWorkLog',
    'retrieveHrWorkLogPage',
    'initHrWorkLog',
    'retrieveEmpWorkLog',
    'retrieveEmpLoyee',
    'getCacheData'
]);

module.exports = WorkLogActions;

store【WorkLogStore.js】

reflux中store作为publisher和subscriber存在，当接收到action后，将执行对应的onActionName()回调函数，并执行
this.fireEvent('retrieve', '', this);
或者storeA.trigger(3)发送事件和数据。当组件监听到后将执行监听回调函数，更新state从而驱动UI的更新;
----------
var Reflux = require('reflux');
var WorkLogActions = require('../action/WorkLogActions');
var Utils = require('../../../public/script/utils');
var MsgActions = require('../../../lib/action/MsgActions');

var WorkLogStore = Reflux.createStore({
    listenables: [WorkLogActions],

    filter: {},
    recordSet: [],
    startPage : 0,
    pageRow : 0,
    totalRow : 0,

    init: function() {
    },
    getServiceUrl: function(action)
    {
        return Utils.hrUrl+action;
    },

    fireEvent: function(operation, errMsg, self)
    {
        self.trigger({
            filter: self.filter,
            recordSet: self.recordSet,
            startPage: self.startPage,
            pageRow: self.pageRow,
            totalRow: self.totalRow,
            operation: operation,
            errMsg: errMsg
        });

        MsgActions.showError('hr_work_log', operation, errMsg);
    },
    onGetCacheData: function() {
        this.fireEvent('cache', '', this);
    },

    onRetrieveHrWorkLog: function(filter) {
        var self = this;
        var url = this.getServiceUrl('hr_work_log/retrieve');
        Utils.doRetrieveService(url, filter, self.startPage, self.pageRow, self.totalRow).then(function(result) {
            if(result.errCode==null || result.errCode=='' || result.errCode=='000000'){
                self.recordSet = result.object.list;
                self.startPage = result.object.startPage;
                self.pageRow = result.object.pageRow;
                self.totalRow = result.object.totalRow;
                self.filter = filter;

                self.fireEvent('retrieve', '', self);
            }
            else{
                self.fireEvent('retrieve', "处理错误["+result.errCode+"]["+result.errDesc+"]", self);
            }
        }, function(value){
            self.fireEvent('retrieve', "调用服务错误", self);
        });
    },

    onRetrieveHrWorkLogPage: function(filter, startPage, pageRow) {
        this.startPage = startPage;
        this.pageRow = pageRow;
        this.onRetrieveHrWorkLog( filter );
    },

    onInitHrWorkLog: function(filter) {
        if( this.recordSet.length > 0 ){
            if( Utils.compareTo(this.filter, filter) ){
                this.fireEvent('retrieve', '', this);
                return;
            }
        }

        this.onRetrieveHrWorkLog(filter);
    },


    onCreateHrWorkLog: function(workLog) {

        var self = this;
        var data = workLog;
        var url = this.getServiceUrl('hr_work_log/create');
        Utils.doCreateService(url, data).then(function(result) {
            if(result.errCode==null || result.errCode=='' || result.errCode=='000000'){
                result.object.perName = data.perName;
                result.object.staffCode = data.staffCode;
                result.object.deptName = data.deptName;
                self.recordSet.push(result.object);

                self.totalRow = self.totalRow + 1;
                self.fireEvent('create', '', self);
            }
            else{
                self.fireEvent('create', "处理错误["+result.errCode+"]["+result.errDesc+"]", self);
            }
        }, function(value){
            self.fireEvent('create', "调用服务错误", self);
        });

    },

    onUpdateHrWorkLog: function(workLog) {
        var url = this.getServiceUrl('hr_work_log/update');
        Utils.recordUpdate(this, workLog, url);
    },

    onDeleteHrWorkLog: function(uuid) {
        var url = this.getServiceUrl('hr_work_log/remove');
        Utils.recordDelete(this, uuid, url);
    }
});

module.exports = WorkLogStore;

component【WorkLogPage.js】

component中监听store中发送的事件并更新state，驱动UI的更新
----------

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';
import ReactMixin from 'react-mixin';
var Reflux = require('reflux');
import { Button, Table, Icon, Modal, Input } from 'antd';
const Search = Input.Search;

import ServiceMsg from '../../lib/Components/ServiceMsg';
import DimissTodoPage from './Components/DimissTodoPage';
var Common = require('../../public/script/common');
var Utils = require('../../public/script/utils');
var WorkLogStore = require('./data/WorkLogStore.js');
var WorkLogActions = require('./action/WorkLogActions');
import WorkLogFilter from './Components/WorkLogFilter';
import CreateWorkLogPage from './Components/CreateWorkLogPage';
import UpdateWorkLogPage from './Components/UpdateWorkLogPage';
import DetailsWorkLogPage from './Components/DetailsWorkLogPage';


var pageRows = 10;
var WorkLogPage = React.createClass({
    getInitialState: function () {
        return {
            workLogSet: {
                recordSet: [],
                startPage: 1,
                pageRow: 10,
                totalRow: 0,
                operation: '',
                errMsg: ''
            },
            action: 'query',
            workLog: null,

            loading: false,
            moreFilter: false,
            filterValue: '',
            filter: {},
        }
    },

    mixins: [Reflux.listenTo(WorkLogStore, "onServiceComplete")],
    onServiceComplete: function (data) {
        if (data.operation === 'cache') {
            var ff = data.filter.staffCode;
            if (ff === null || typeof (ff) === 'undefined' || ff === '') {
                ff = data.filter.perName;
                if (ff === null || typeof (ff) === 'undefined') {
                    ff = '';
                }
            }

            this.state.filterValue = ff;
            this.state.filter = data.filter;
            this.state.moreFilter = (data.filter.more === '1');

            if (this.state.moreFilter) {
                var mp = this.refs.WorkLogFilter;
                if (mp !== null && typeof (mp) !== 'undefined') {
                    mp.state.workLog = this.state.filter;
                }
            }
        }

        this.setState({
            loading: false,
            workLogSet: data
        });
    },
    // 第一次加载
    componentDidMount: function () {
        WorkLogActions.getCacheData();
    },
    handleQueryClick: function () {
        this.setState({ loading: true });
        this.state.filter.status = '1';
        this.state.filter.corpUuid = window.loginData.compUser.corpUuid;
        this.state.filter.more = (this.state.moreFilter ? '1' : '0');
        WorkLogActions.retrieveHrWorkLogPage(this.state.filter, this.state.workLogSet.startPage, pageRows);
    },
    showMoreFilter: function (event) {
        this.setState({ moreFilter: !this.state.moreFilter });
    },
    onChangePage: function (pageNumber) {
        this.state.workLogSet.startPage = pageNumber;
        this.handleQueryClick();
    },
    onShowSizeChange: function (current, pageSize) {
        pageRows = pageSize;
        this.handleQueryClick();
    },
    onChangeFilter: function (e) {
        this.setState({ filterValue: e.target.value });
    },
    onSearch: function (e) {
        this.state.filter = {};
        var filterValue = this.state.filterValue;
        if (Common.isIncNumber(filterValue)) {
            this.state.filter.staffCode = filterValue;
        }
        else {
            this.state.filter.perName = filterValue;
        }

        this.handleQueryClick();
    },
    onMoreSearch: function () {
        this.state.filter = this.refs.WorkLogFilter.state.workLog;
        this.handleQueryClick();
    },
    onClickDelete: function (workLog, event) {
        Modal.confirm({
            title: '删除确认',
            content: '是否删除选中的工作日志',
            okText: '确定',
            cancelText: '取消',
            onOk: this.onClickDelete2.bind(this, workLog)
        });
    },
    onClickDelete2: function (workLog) {
        this.setState({ loading: true });
        this.state.workLogSet.operation = '';
        WorkLogActions.deleteHrWorkLog(workLog.uuid);
    },
    handleCreate: function (e) {
        this.setState({ action: 'create' });
    },
    onClickDetails: function (workLog, event) {
        this.setState({ workLog: workLog, action: 'detail' });
    },
    onClickUpdate: function (workLog, event) {
        this.setState({ workLog: workLog, action: 'update' });
    },
    onGoBack: function (workLog) {
        this.setState({ action: 'query' });
        // 离职后处理
        if (workLog) {
            var chgType = workLog.chgType;
            if (chgType === '离职' || chgType === '辞退' || chgType === '开除') {
                this.refs.nextWindow.toggle();
                this.refs.nextWindow.initStaff(workLog);
            }
        }
    },

    render: function () {
        const columns = [
            {
                title: '员工编号',
                dataIndex: 'staffCode',
                key: 'staffCode',
                width: 140,
            },
            {
                title: '姓名',
                dataIndex: 'perName',
                key: 'perName',
                width: 140,
            },
            {
                title: '变更类型',
                dataIndex: 'chgType',
                key: 'chgType',
                width: 140,
                render: (text, record) => (Utils.getOptionName('HR系统', '工作变更类型', record.chgType, false, this)),
            },
            {
                title: '部门名称',
                dataIndex: 'deptName',
                key: 'deptName',
                width: 140,
            },
            {
                title: '调前说明',
                dataIndex: 'befMemo',
                key: 'befMemo',
                width: 140,
            },
            {
                title: '调后说明',
                dataIndex: 'aftMemo',
                key: 'aftMemo',
                width: 140,
            },
            {
                title: '生效日期',
                dataIndex: 'effectDate',
                key: 'effectDate',
                width: 140,
                render: (text, record) => (Common.formatDate(text, Common.dateFormat)),
            },

            {
                title: '更多操作',
                key: 'action',
                width: 70,
                render: (text, record) => (
                    <span>
                        <a href="#" onClick={this.onClickDetails.bind(this, record)} title='详情'><Icon type='bars' /></a>
                    </span>
                ),
            }
        ];
        /*
                        <a href="#" onClick={this.onClickUpdate.bind(this, record)} title='修改工作'><Icon type={Common.iconUpdate} /></a>
                        <span className="ant-divider" />
                    <a href="#" onClick={this.onClickDelete.bind(this, record)} title='删除工作'><Icon type={Common.iconRemove}/></a>
                    <span className="ant-divider" />
        */

        var recordSet = this.state.workLogSet.recordSet;
        var moreFilter = this.state.moreFilter;
        var visible = (this.state.action === 'query') ? '' : 'none';
        var pag = {
            showQuickJumper: true, total: this.state.workLogSet.totalRow, pageSize: this.state.workLogSet.pageRow,
            current: this.state.workLogSet.startPage, size: 'large', showSizeChanger: true, onShowSizeChange: this.onShowSizeChange, onChange: this.onChangePage
        };

        var contactTable =
            <div className='grid-page' style={{ overflow: 'hidden', display: visible }}>
                <div style={{ padding: '8px 0 0 0', height: '100%', width: '100%', overflowY: 'auto' }}>
                    <ServiceMsg ref='mxgBox' svcList={['hr_work_log/retrieve', 'hr_work_log/remove']} />
                    <WorkLogFilter ref="WorkLogFilter" moreFilter={moreFilter} />

                    <div style={{ margin: '8px 0 0 0' }}>
                        <div className='toolbar-table'>
                            <div style={{ float: 'left' }}>
                                <Button icon={Common.iconAdd} type="primary" title="增加工作变更信息" onClick={this.handleCreate} />
                                <Button icon={Common.iconRefresh} title="刷新数据" onClick={this.handleQueryClick} style={{ marginLeft: '4px' }} />
                            </div>
                            {
                                moreFilter ?
                                    <div style={{ textAlign: 'right', width: '100%' }}>
                                        <Button title="查询" onClick={this.onMoreSearch} loading={this.state.loading} style={{ marginRight: '5px' }}>查询</Button>
                                        <Button title="快速条件" onClick={this.showMoreFilter}>快速条件</Button>
                                    </div> :
                                    <div style={{ textAlign: 'right', width: '100%' }}>
                                        <Search placeholder="查询(员工编号/员工姓名)" style={{ width: Common.searchWidth }} value={this.state.filterValue} onChange={this.onChangeFilter} onSearch={this.onSearch} />
                                        <Button title="更多条件" onClick={this.showMoreFilter} style={{ marginLeft: '8px' }}>更多条件</Button>
                                    </div>
                            }
                        </div>
                    </div>
                    <div style={{ width: '100%', padding: '0 18px 8px 20px' }}>
                        <Table columns={columns} dataSource={recordSet} rowKey={record => record.uuid} loading={this.state.loading} pagination={pag} size="middle" bordered={Common.tableBorder} />
                    </div>
                </div>
            </div>;

        var page = null;
        if (this.state.action === 'create') {
            page = <CreateWorkLogPage ref='createPage' onBack={this.onGoBack} />;
        }
        else if (this.state.action === 'detail') {
            page = <DetailsWorkLogPage onBack={this.onGoBack} userUuid={this.state.workLog.userUuid} />
        }
        else if (this.state.action === 'update') {
            page = <UpdateWorkLogPage onBack={this.onGoBack} workLog={this.state.workLog} />
        }

        return (
            <div style={{ width: '100%', height: '100%' }}>
                {contactTable}
                {page}
                <DimissTodoPage ref="nextWindow" />
            </div>
        );
    }
});

module.exports = WorkLogPage;