reactive-state
Version:
Redux-like state management using RxJS and TypeScript
82 lines • 4.04 kB
JavaScript
;
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.enableDevTool = void 0;
var redux_1 = require("redux");
var rxjs_1 = require("rxjs");
var operators_1 = require("rxjs/operators");
function enableDevTool(store) {
console.warn("enableDevTool requires the browser extension. Note: the 'skip action' feature is not supported (but 'jump' works as expected')");
if (typeof window === "undefined") {
// nodejs deployments?
return;
}
var extension = window["__REDUX_DEVTOOLS_EXTENSION__"] || window["devToolsExtension"];
if (!extension) {
console.warn("devToolsExtension not found in window (extension not installed?). Could not enable devTool");
return;
}
var devtoolExtension = extension();
var reduxToReactiveSync = new rxjs_1.Subject();
var reactiveStateUpdate = new rxjs_1.Subject();
store
.select()
.pipe(operators_1.take(1))
.subscribe(function (initialState) {
var enhancer = function (next) {
return function (reducer, preloadedState) {
// run any other store enhancers
var reduxStore = next(reducer, initialState);
// write back the state from DevTools/Redux to our ReactiveState
reduxStore.subscribe(function () {
// const reduxState = reduxStore.getState();
// console.info("RDX UPD STATE: ", reduxState)
// console.info("JUMP/SKIP not supported, do not use or you get undefined behaviour!")
// reduxToReactiveSync.next(reduxState);
});
reactiveStateUpdate.subscribe(function (p) {
// console.info("RDX DISP", p)
reduxStore.dispatch({ type: p.actionName, payload: p.payload, state: p.state });
});
return reduxStore;
};
};
// TODO: State should be type S, but TS does not yet support it
// maybe after TS 2.7: https://github.com/Microsoft/TypeScript/issues/10727
var reduxReducer = function (state, action) {
// TODO: "skip" in devtools does not work here. In plain redux, we could call our reducers with the state
// and the action payload of the (replayed-) action. But we can"t to it with our store, as even if we
// could reset it to a state and replay the action, the operation is async. But we must return a state
// here in a sync manner... :(
if (action.type === "@@INIT") {
// redux internal action
return __assign({}, state);
}
// What we actually do is instead of returning reduce(state, action) we return the result-state we have
// attached to action, that is kept in the log
return __assign({}, action.state);
};
redux_1.createStore(reduxReducer, initialState, redux_1.compose(enhancer, devtoolExtension));
});
store.stateChangedNotification.subscribe(function (notification) {
var actionName = notification.actionName, actionPayload = notification.actionPayload, newState = notification.newState;
if (actionName !== "__INTERNAL_SYNC")
reactiveStateUpdate.next({ actionName: actionName || "UNNAMED", payload: actionPayload, state: newState });
});
var syncReducer = function (state, payload) {
return __assign({}, payload);
};
store.addReducer(reduxToReactiveSync, syncReducer, "__INTERNAL_SYNC");
}
exports.enableDevTool = enableDevTool;
//# sourceMappingURL=devtool.js.map