@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
52 lines • 2.52 kB
JavaScript
import { __assign } from "tslib";
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ActionCreators, createDevTools } from 'redux-devtools';
import { AppWithParentReduxHistoryProps } from '../../../app-with-parent-redux-history-props';
import { Provider } from 'react-redux';
import { useEffect, useState } from 'react';
var importState = 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()));
}
};
useEffect(function () {
props.setAppState(appState);
}, [appState]);
useEffect(function () {
if (props.importedState) {
handleImport(props.importedState);
props.setImportedState('');
}
}, [props.importedState]);
return _jsx(_Fragment, {});
};
var ImportExportMonitor2 = function (props) {
var D = createDevTools(_jsx(ImportExport, __assign({}, props)));
return _jsx(D, {});
};
var ImportExportMonitor = function (_a) {
var store = _a.store, isOpen = _a.isOpen, companyId = _a.companyId, apiKey = _a.apiKey, onClose = _a.onClose;
var _b = useState(''), appState = _b[0], setAppState = _b[1];
var _c = useState(''), importedState = _c[0], setImportedState = _c[1];
return (_jsxs(_Fragment, { children: [_jsx(Provider, __assign({ store: store }, { children: _jsx(ImportExportMonitor2, { setAppState: setAppState, importedState: importedState, setImportedState: setImportedState }) })), _jsx(AppWithParentReduxHistoryProps, { setParentReduxState: setImportedState, parentReduxState: appState, companyId: companyId, apiKey: apiKey, isOpen: isOpen, onClose: onClose })] }));
};
export { ImportExportMonitor };
//# sourceMappingURL=ImportExportMonitor.js.map