@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
79 lines • 3.53 kB
JavaScript
;
exports.__esModule = true;
exports.withUseState = exports.Provider = exports.useStateTB = void 0;
var tslib_1 = require("tslib");
var react_1 = require("react");
var react_redux_1 = require("react-redux");
exports.Provider = react_redux_1.Provider;
var uuid_1 = require("uuid");
function useStateTB(props) {
if (props === void 0) { props = {}; }
var isWithOptions = !(typeof props === 'boolean' ||
typeof props === 'string' ||
typeof props === 'number' ||
props === null ||
props === undefined ||
Array.isArray(props));
var initialValue = isWithOptions
? Object.keys(props).includes('initialValue')
? props.initialValue
: null
: props;
var propsForDestructor = isWithOptions ? props : {};
var name = propsForDestructor.name, logs = propsForDestructor.logs, forceInitialValue = propsForDestructor.forceInitialValue;
var showInLogs = logs || !!name;
var _a = (0, react_1.useState)(initialValue), rValue = _a[0], setRValue = _a[1];
var key = (0, react_1.useRef)(name || 'n_' + (0, uuid_1.v4)().replaceAll('-', ''));
var dispatch = (0, react_redux_1.useDispatch)();
var isValueInReduxExist = (0, react_redux_1.useSelector)(function (state) {
var toolBoxUseState = (state || {}).toolBoxUseState;
if (!toolBoxUseState)
return false;
return Object.keys(toolBoxUseState).includes(key.current);
});
var valueInReduxState = (0, react_redux_1.useSelector)(function (state) { var _a; return (_a = state === null || state === void 0 ? void 0 : state.toolBoxUseState) === null || _a === void 0 ? void 0 : _a[key.current]; });
var reduxValue = isValueInReduxExist ? valueInReduxState : initialValue;
var value = showInLogs ? reduxValue : rValue;
var setValue = function (v) {
showInLogs
? dispatch({
type: 'TOOL_BOX_USE_STATE',
payload: { value: v, key: key.current }
})
: setRValue(v);
};
var setInitialValue = function (v) {
showInLogs
? dispatch({
type: 'TOOL_BOX_USE_STATE_INITIAL_VALUE',
payload: { value: v, key: key.current, force: forceInitialValue }
})
: setRValue(v);
};
(0, react_1.useEffect)(function () {
if (isWithOptions)
if (Object.keys(props).includes('initialValue') && !isValueInReduxExist)
setInitialValue(initialValue);
}, [isWithOptions, reduxValue]);
return [value, setValue];
}
exports.useStateTB = useStateTB;
var monitoredReducer = function (state, action) {
var _a, _b;
if (state === void 0) { state = {}; }
switch (action.type) {
case 'TOOL_BOX_USE_STATE':
return tslib_1.__assign(tslib_1.__assign({}, state), (_a = {}, _a[action.payload.key] = action.payload.value, _a));
case 'TOOL_BOX_USE_STATE_INITIAL_VALUE':
return tslib_1.__assign(tslib_1.__assign({}, state), (_b = {}, _b[action.payload.key] = action.payload.force || !(state === null || state === void 0 ? void 0 : state[action.payload.key])
? action.payload.value
: state[action.payload.key], _b));
default:
return state;
}
};
var withUseState = function (reducers) {
return tslib_1.__assign(tslib_1.__assign({}, reducers), { toolBoxUseState: monitoredReducer });
};
exports.withUseState = withUseState;
//# sourceMappingURL=use-state.js.map