@rtbjs/use-state
Version:
`@rtbjs/use-state` is a state management tool that can act as a local state and be easily turned into a global redux state. It is an innovative approach to state management that combines the advantages of both React's useState and Redux's state management
55 lines • 2.87 kB
JavaScript
;
exports.__esModule = true;
exports.ImportExportMonitor = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var redux_devtools_1 = require("redux-devtools");
var app_with_parent_redux_history_props_1 = require("../../../app-with-parent-redux-history-props");
var react_redux_1 = require("react-redux");
var react_1 = require("react");
var importState = redux_devtools_1.ActionCreators.importState;
var ImportExport = function (props) {
var getStateAndActions = function () { return ({
monitorState: props.monitorState,
actionsById: props.actionsById,
nextActionId: props.nextActionId,
stagedActionIds: props.stagedActionIds,
skippedActionIds: props.skippedActionIds,
committedState: props.committedState,
computedStates: [],
currentStateIndex: props.currentStateIndex
}); };
var appState = JSON.stringify(getStateAndActions());
var handleImport = function (newState) {
try {
var appState_1 = JSON.parse(newState);
props.dispatch(importState(appState_1));
}
catch (e) {
console.warn('Invalid app state JSON passed into the input prompt: ', e);
props.dispatch(importState(getStateAndActions()));
}
};
(0, react_1.useEffect)(function () {
props.setAppState(appState);
}, [appState]);
(0, react_1.useEffect)(function () {
if (props.importedState) {
handleImport(props.importedState);
props.setImportedState('');
}
}, [props.importedState]);
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
};
var ImportExportMonitor2 = function (props) {
var D = (0, redux_devtools_1.createDevTools)((0, jsx_runtime_1.jsx)(ImportExport, tslib_1.__assign({}, props)));
return (0, jsx_runtime_1.jsx)(D, {});
};
var ImportExportMonitor = function (_a) {
var store = _a.store, isOpen = _a.isOpen, companyId = _a.companyId, apiKey = _a.apiKey, onClose = _a.onClose;
var _b = (0, react_1.useState)(''), appState = _b[0], setAppState = _b[1];
var _c = (0, react_1.useState)(''), importedState = _c[0], setImportedState = _c[1];
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_redux_1.Provider, tslib_1.__assign({ store: store }, { children: (0, jsx_runtime_1.jsx)(ImportExportMonitor2, { setAppState: setAppState, importedState: importedState, setImportedState: setImportedState }) })), (0, jsx_runtime_1.jsx)(app_with_parent_redux_history_props_1.AppWithParentReduxHistoryProps, { setParentReduxState: setImportedState, parentReduxState: appState, companyId: companyId, apiKey: apiKey, isOpen: isOpen, onClose: onClose })] }));
};
exports.ImportExportMonitor = ImportExportMonitor;
//# sourceMappingURL=ImportExportMonitor.js.map