@rtbjs/use-state/dist/esm/use-state.js

`@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

import { __assign } from "tslib";
import { useEffect, useRef, useState } from 'react';
import { useDispatch, Provider, useSelector } from 'react-redux';
import { v4 as uuidv4 } from '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 = useState(initialValue), rValue = _a[0], setRValue = _a[1];
    var key = useRef(name || 'n_' + uuidv4().replaceAll('-', ''));
    var dispatch = useDispatch();
    var isValueInReduxExist = useSelector(function (state) {
        var toolBoxUseState = (state || {}).toolBoxUseState;
        if (!toolBoxUseState)
            return false;
        return Object.keys(toolBoxUseState).includes(key.current);
    });
    var valueInReduxState = 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);
    };
    useEffect(function () {
        if (isWithOptions)
            if (Object.keys(props).includes('initialValue') && !isValueInReduxExist)
                setInitialValue(initialValue);
    }, [isWithOptions, reduxValue]);
    return [value, setValue];
}
var monitoredReducer = function (state, action) {
    var _a, _b;
    if (state === void 0) { state = {}; }
    switch (action.type) {
        case 'TOOL_BOX_USE_STATE':
            return __assign(__assign({}, state), (_a = {}, _a[action.payload.key] = action.payload.value, _a));
        case 'TOOL_BOX_USE_STATE_INITIAL_VALUE':
            return __assign(__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 __assign(__assign({}, reducers), { toolBoxUseState: monitoredReducer });
};
export { useStateTB, Provider, withUseState };
//# sourceMappingURL=use-state.js.map