ayano-react/dist/App.js

react app creator

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _reactRouterRedux = require('react-router-redux');

var _redux = require('redux');

var _createHashHistory = require('history/createHashHistory');

var _createHashHistory2 = _interopRequireDefault(_createHashHistory);

var _reduxDevtoolsExtension = require('redux-devtools-extension');

var _thunk = require('./thunk.js');

var _thunk2 = _interopRequireDefault(_thunk);

var _ayanoUtils = require('ayano-utils');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var puppetPropsMaps = {
  apis: 'apis', reducers: 'reducerActions', actions: 'actions', routers: 'routers', toPath: 'toPath'
};

var App = function () {
  function App(options) {
    _classCallCheck(this, App);

    options = options || {};
    // 创建了一个傀儡，用于在thunk中代理访问到当前对象的某几个属性
    this.puppet = this.toPuppet();
    this.name = options.name;
    // 使用链式调用，为了能清楚的知道整个流程的顺序
    this.initHistory(options.history).setRequest(options.request).setReducer(options.reducer, options).setReduxMiddleware(options.middlewares).initStore().initActions(options.actions).initRouter(options.router);
    // apis: _apis, constants, actions: _actions, routers: _routers
  }

  // 初始化路由属性，准备渲染，并初始化toPath，用于之后路由跳转


  _createClass(App, [{
    key: 'initRouter',
    value: function initRouter(router) {
      this.updateRouter(router);
      if (router) {
        this.onMatchLocation(this.history.location, this.history.action);
      }
      return this;
    }
  }, {
    key: 'updateRouter',
    value: function updateRouter(router) {
      this.router = router;
      if (router) {
        this.toPath = router.toPath();
        this.onMatchLocation = router.onMatchLocation(this.puppet);
        this.unListenerHistory = this.history.listen(this.onMatchLocation);
      }
    }

    // 创建历史，默认为hashHistory

  }, {
    key: 'initHistory',
    value: function initHistory(history) {
      this.history = history || (0, _createHashHistory2.default)();
      return this;
    }

    //创建了store 并尝试创建reducerActions

  }, {
    key: 'initStore',
    value: function initStore() {
      var store = (0, _redux.createStore)(this.reduxReducer, (0, _reduxDevtoolsExtension.composeWithDevTools)(_redux.applyMiddleware.apply(undefined, _toConsumableArray(this.middlewares))));
      this.store = store;
      this.reducer && (this.reducerActions = this.reducer.toReducerAction(this.store.dispatch));
      return this;
    }

    // 绑定actions到dispatch上，隐藏dispatch

  }, {
    key: 'initActions',
    value: function initActions(actions) {
      var _this = this;

      this.originActions = actions;
      this.actions = Object.keys(actions).reduce(function (pre, key) {
        var action = actions[key];
        pre[key] = (0, _redux.bindActionCreators)(action, _this.store.dispatch);
        return pre;
      }, {});
      return this;
    }

    // 使用request 初始化apis

  }, {
    key: 'setRequest',
    value: function setRequest(request) {
      this.request = request;
      var apis = request && request.toApis();
      apis && _ayanoUtils.logger.log('generate apis: ', apis);
      this.apis = apis;
      return this;
    }
  }, {
    key: 'addDefaultReducer',
    value: function addDefaultReducer(reducer) {
      reducer.useOriginReducer("router", _reactRouterRedux.routerReducer);
    }
    // 将传入的reducer对象转换成 redux reducer并尝试创建reducerActions

  }, {
    key: 'setReducer',
    value: function setReducer(reducer, _ref) {
      var addDefaultReducer = _ref.addDefaultReducer;

      this.reducer = reducer;
      addDefaultReducer = addDefaultReducer || this.addDefaultReducer;
      addDefaultReducer(this.reducer);
      var reduxReducer = reducer && reducer.toReduxReducers();
      reducer && _ayanoUtils.logger.log('generate redux reducer & reducer actions: ', reduxReducer);
      this.reduxReducer = reduxReducer;
      if (this.store) {
        var reducerActions = reducer.toReducerAction(this.store.dispatch);
        this.reducerActions = reducerActions;
      }
      return this;
    }

    // 定义默认的redux middlewares

  }, {
    key: 'defaultReduxMiddware',
    value: function defaultReduxMiddware() {
      return [_thunk2.default.withExtraArgument(this.puppet), (0, _reactRouterRedux.routerMiddleware)(this.history)];
    }

    // 使用参数中的middlewares设置middlewares，如果是个function则使用返回值

  }, {
    key: 'setReduxMiddleware',
    value: function setReduxMiddleware(middlewares) {
      var defaultReduxMiddware = this.defaultReduxMiddware();
      this.middlewares = middlewares || defaultReduxMiddware;
      if (middlewares && (0, _ayanoUtils.is)(TYPES.Function)(middlewares)) {
        this.middlewares = middlewares(defaultReduxMiddware) || defaultReduxMiddware;
      }
      return this;
    }

    // 生成一个傀儡，用于代理访问某些属性, 并只读

  }, {
    key: 'toPuppet',
    value: function toPuppet(app) {
      var handler = {
        get: function get(target, name) {
          if (puppetPropsMaps[name]) {
            return target[puppetPropsMaps[name]];
          } else {
            return void 0;
          }
        },
        set: function set(target, name, value) {
          throw new Error("禁止为apis设置属性");
        }
      };
      return new Proxy(this, handler);
    }
  }]);

  return App;
}();

exports.default = App;