学习reflux的总结

青旅半醒 2022-06-02 08:41 43阅读 0赞

最近学习reflux,总结一下，方便以后回顾.  
[参考资料,我觉得这个是极品，但是demo无法正常运行.][demo_.]  
1.reflux的原理:  
1.1reflux是对flux架构的实现\[flux相当于java中的架构/思想\]；  
1.2reflux中的数据流是单向的;  
2.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;

[demo_.]: https://www.cnblogs.com/lovesueee/p/4893218.html