学习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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
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;
赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

最痛苦的事，<br><br>不是失败，<br><br>而是,我本可以!