reactive-state
Version:
Redux-like state management using RxJS and TypeScript
131 lines • 5.77 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.connect = void 0;
var React = require("react");
var rxjs_1 = require("rxjs");
var provider_1 = require("./provider");
var actions_1 = require("./actions");
var operators_1 = require("rxjs/operators");
/**
* Connects a Component's props to a set of props of the application state coming from a Store object.
*/
// TODO: earlier TS version could infer TOriginalProps, why is this not working anymore? Bug in TS?
// possible candidate: https://github.com/Microsoft/TypeScript/issues/21734
function connect(ComponentToConnect, connectCallback) {
var ConnectedComponent = /** @class */ (function (_super) {
__extends(ConnectedComponent, _super);
function ConnectedComponent(props) {
var _this = _super.call(this, props) || this;
_this.subscription = new rxjs_1.Subscription();
_this.actionProps = {};
_this.inputProps = new rxjs_1.ReplaySubject(1);
_this.state = {
connectedProps: undefined,
ready: false,
};
_this.inputProps.next(_this.getProps());
_this.subscription.add(function () { return _this.inputProps.complete(); });
if (_this.props.reactiveStateStore) {
_this.store = _this.props.reactiveStateStore.clone();
// TODO this hack is necesseary because we seem to have a bug in the destroy logic for clones
_this.parentDestroyed = _this.props.reactiveStateStore.destroyed;
}
_this.connect();
return _this;
}
ConnectedComponent.prototype.connect = function () {
if (this.store === undefined)
return;
this.connectResult = connectCallback(this.store, this.inputProps.asObservable());
if (this.connectResult.actionMap) {
this.actionProps = actions_1.assembleActionProps(this.connectResult.actionMap);
}
};
ConnectedComponent.prototype.subscribeToStateChanges = function () {
var _this = this;
if (this.store === undefined)
return;
var connectResult = this.connectResult;
if (connectResult.props) {
this.subscription.add(connectResult.props.pipe(operators_1.takeUntil(this.parentDestroyed)).subscribe(function (connectedProps) {
_this.setState(function (prevState) {
return __assign(__assign({}, prevState), { connectedProps: connectedProps, ready: true });
});
}));
}
else {
this.setState(function (prevState) { return ({ ready: true }); });
}
};
/**
* We need to remove the remoteReacticeState properties from our input props; the remainder input props
* are passed down to the connected component
*/
ConnectedComponent.prototype.getProps = function () {
var props = __assign({}, this.props);
delete props.reactiveStateStore;
return props;
};
ConnectedComponent.prototype.componentWillUnmount = function () {
if (this.store !== undefined) {
this.store.destroy();
}
this.subscription.unsubscribe();
};
ConnectedComponent.prototype.componentDidMount = function () {
this.subscribeToStateChanges();
};
ConnectedComponent.prototype.componentDidUpdate = function (prevProps) {
if (prevProps !== this.props) {
this.inputProps.next(this.getProps());
}
};
ConnectedComponent.prototype.render = function () {
var props = this.getProps();
if (this.store === undefined || this.state.ready === true) {
return (React.createElement(ComponentToConnect, __assign({}, this.state.connectedProps, this.actionProps, props)));
}
else {
return null;
}
};
return ConnectedComponent;
}(React.Component));
return /** @class */ (function (_super) {
__extends(class_1, _super);
function class_1(props) {
return _super.call(this, props) || this;
}
class_1.prototype.render = function () {
var _this = this;
return (React.createElement(provider_1.StoreConsumer, null, function (value) { return React.createElement(ConnectedComponent, __assign({ reactiveStateStore: value }, _this.props)); }));
};
return class_1;
}(React.Component));
}
exports.connect = connect;
//# sourceMappingURL=connect.js.map