Welcome to React
42 |
44 | To get started, edit src/App.js and save to reload.
45 |
44 | To get started, edit src/App.js and save to reload.
45 |
12 |
13 | import {createStore,Provider} from './package/fastkit-dva'
14 | import appModels from './models/app'
15 | const app = createStore({})
16 | app.model(appModels)
17 | const AppView = () => {
18 | return (
19 |
20 |
22 | )
23 | }
24 |
25 | 这里是初始化的部分代码 之后会与dva尽可能的保持一致 在后续版本会进行修改
26 |
27 | ##connect部分
28 |
29 |
30 | export default connect(['app'],({app})=>({...app}))(App)
31 |
32 |
33 | 这里其余字段都与react-redux保持一致 但是首字段加了一个modelList
34 | 这个字段的作用就是为了能够更好的进行监听 比如上面的app
35 | 也就是说 我只会监听app这个model中的state发生的变化 其他的reduce变化 不会触发这个页面的监听回调
36 |
37 | ##connect初始化监听部分
38 |
39 |
40 | /**
41 | * 初始化监听
42 | *
43 | * @memberof Connect
44 | */
45 | initSubscribe = () =>{
46 | modelList.forEach((e)=>{
47 | this.timestamp.push(Date.parse(new Date()))
48 | this.store.callBackList[e][String(this.timestamp.slice(-1)[0])] = this.onStateChange
49 | })
50 | }
51 |
52 | 在这里会直接对指定modelName去添加一个callBack 并且名字使用时间戳的方式来实现 避免出现重复命名
53 | 这个时间戳将会在组件被销毁的时候被使用到
54 |
55 | ##connect组件销毁
56 |
57 |
58 | /**
59 | * 如果页面被销毁则清除掉原来的监听事件 减少计算
60 | *
61 | * @memberof Connect
62 | */
63 | componentWillUnmount = () => {
64 | modelList.forEach((e)=>{
65 | this.timestamp.forEach((el)=>{
66 | if (this.store.callBackList[e][el]){
67 | delete this.store.callBackList[e][el]
68 | }
69 | })
70 | })
71 | };
72 |
73 | 当组件被销毁的时候 会从当前modelName的callBack回调中去删除属于当前页面的回调 避免下次在触发dispatch的时候 重新参与运算
74 |
75 |
76 | ##model部分
77 |
78 |
79 | import test from '../utils/test'
80 | export default {
81 | namespace : 'app',
82 | state : {
83 | num: 0
84 | },
85 | reducers : {
86 | add(state, {payload}) {
87 | return ({...state,num:state.num + 1})
88 | },
89 | reduce(state,{payload}){
90 | return ({...state,num:state.num - 1})
91 | },
92 | reset(state,{payload}){
93 | return ({...state,num:0})
94 | }
95 | },
96 | effects : {
97 | *clear({payload},{select,put,take,call}){
98 | yield call(test,11111)
99 | }
100 | }
101 | }
102 |
103 | 这里的使用方式跟dva保持了一致 因为是直接使用的saga来进行的实现 所以saga的一些功能与属性都可以直接的进行使用 不会有影响
104 |
105 | 现在这个项目还不够成熟 目前的这个版本删除了中间件 下一个版本将会用redux中间件的方式去将dispatch进行合并 但是只会支持saga与router这两个 尽可能去减少项目中不必要的reduce从来提升性能吧 真的是有得必有失啊
106 |
--------------------------------------------------------------------------------
/src/package/fastkit-dva/lib/src/createStore.js:
--------------------------------------------------------------------------------
1 | System.register(["redux-saga", "redux-saga/effects"], function (exports_1, context_1) {
2 | "use strict";
3 | var __moduleName = context_1 && context_1.id;
4 | function default_1(option) {
5 | var app = {
6 | _store: {},
7 | _model: {},
8 | model: model,
9 | dispatch: dispatch,
10 | getState: getState,
11 | subscribe: subscribe,
12 | callBackList: {},
13 | isBatchUpdate: false
14 | };
15 | return app;
16 | function model(m) {
17 | if (!app._model[m.namespace]) {
18 | app._model[m.namespace] = m;
19 | app._store[m.namespace] = m.state;
20 | app.callBackList[m.namespace] = {};
21 | }
22 | }
23 | function dispatch(action) {
24 | var s = action.type.split('/');
25 | if (s.length < 1)
26 | throw new 'type参数不符合要求';
27 | var name = s[0];
28 | var fun = s[1];
29 | if (isReducers(name, fun)) {
30 | var currState = startReducers(name, fun, action);
31 | if (!app.isBatchUpdate && currState !== app._store[name]) {
32 | updateSub(name, currState);
33 | }
34 | }
35 | else {
36 | startSaga(name, fun, action);
37 | }
38 | }
39 | function startSaga(name, fun, action) {
40 | redux_saga_1.runSaga({ subscribe: subscribe, dispatch: dispatch, getState: getState }, app._model[name].effects[fun], action, sagaEffects);
41 | }
42 | function updateSub(name, currState) {
43 | app._store[name] = currState;
44 | app.isBatchUpdate = false;
45 | if (app.callBackList[name]) {
46 | Object.keys(app.callBackList[name]).forEach(function (e) {
47 | app.callBackList[name][e]();
48 | });
49 | }
50 | }
51 | function startReducers(name, fun, action) {
52 | var state = app._store[name];
53 | return app._model[name].reducers[fun](state, action);
54 | }
55 | function isReducers(name, fun) {
56 | return Object.keys(app._model[name].reducers).some(function (e) { return e == fun; });
57 | }
58 | function getState() {
59 | return app._store;
60 | }
61 | function subscribe(params) {
62 | return function unsubscribe() {
63 | };
64 | }
65 | }
66 | exports_1("default", default_1);
67 | var redux_saga_1, sagaEffects;
68 | return {
69 | setters: [
70 | function (redux_saga_1_1) {
71 | redux_saga_1 = redux_saga_1_1;
72 | },
73 | function (sagaEffects_1) {
74 | sagaEffects = sagaEffects_1;
75 | }
76 | ],
77 | execute: function () {
78 | }
79 | };
80 | });
81 | //# sourceMappingURL=createStore.js.map
--------------------------------------------------------------------------------
/src/package/fastkit-dva/lib/src/connect.js:
--------------------------------------------------------------------------------
1 | System.register(["react", "../utils/PropTypes", "invariant"], function (exports_1, context_1) {
2 | "use strict";
3 | var __extends = (this && this.__extends) || (function () {
4 | var extendStatics = Object.setPrototypeOf ||
5 | ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
6 | function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
7 | return function (d, b) {
8 | extendStatics(d, b);
9 | function __() { this.constructor = d; }
10 | d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
11 | };
12 | })();
13 | var __assign = (this && this.__assign) || Object.assign || function(t) {
14 | for (var s, i = 1, n = arguments.length; i < n; i++) {
15 | s = arguments[i];
16 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
17 | t[p] = s[p];
18 | }
19 | return t;
20 | };
21 | var __moduleName = context_1 && context_1.id;
22 | function createConnect(modelList, mapStateToProps, mapDispatchToProps, mergeProps, _a) {
23 | if (modelList === void 0) { modelList = []; }
24 | var _b = _a === void 0 ? {} : _a, _c = _b.pure, pure = _c === void 0 ? true : _c, _d = _b.withRef, withRef = _d === void 0 ? false : _d;
25 | var Connect = (function (_super) {
26 | __extends(Connect, _super);
27 | function Connect(props, context) {
28 | var _this = _super.call(this, props, context) || this;
29 | _this.componentWillUnmount = function () {
30 | modelList.forEach(function (e) {
31 | _this.timestamp.forEach(function (el) {
32 | if (_this.store.callBackList[e][el]) {
33 | delete _this.store.callBackList[e][el];
34 | }
35 | });
36 | });
37 | };
38 | _this.initSubscribe = function () {
39 | modelList.forEach(function (e) {
40 | _this.timestamp.push(Date.parse(new Date()));
41 | _this.store.callBackList[e][String(_this.timestamp.slice(-1)[0])] = _this.onStateChange;
42 | });
43 | };
44 | _this.onStateChange = function () {
45 | _this.forceUpdate();
46 | };
47 | _this.addExtraProps = function () {
48 | return mapStateToProps(_this.storeState);
49 | };
50 | _this.store = context.store;
51 | _this.storeState = _this.store.getState();
52 | _this.timestamp = [];
53 | return _this;
54 | }
55 | Connect.prototype.componentWillMount = function () {
56 | invariant_1.default(modelList.length > 0, '请输入你要监听改变的model 这是必输项');
57 | invariant_1.default(typeof mapStateToProps == 'function', 'mapStateToProps必须为一个function');
58 | this.initSubscribe();
59 | };
60 | Connect.prototype.render = function () {
61 | return (react_1.default.Children.only(react_1.default.cloneElement(this.props.children, __assign({ dispatch: this.context['store'].dispatch }, this.addExtraProps()))));
62 | };
63 | return Connect;
64 | }(react_1.default.PureComponent));
65 | Connect.contextTypes = {
66 | 'store': PropTypes_1.storeShape.isRequired
67 | };
68 | return function (View) { return function () {
69 | return (