react-principal/lib/createStore.js

A state management with react context for apps which using hooks.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.createStore = void 0;
const react_1 = __importDefault(require("react"));
const react_2 = require("react");
const _1 = require(".");
const observe_1 = require("./observe");
const persist_1 = require("./persist");
/**
 * This function gives you a store. Use it in your components where you want to
 * connect to store and provider
 */
const createStore = ({ reducer, initialState, mapStateToPersist, storage = typeof window !== "undefined" ? window.localStorage : undefined, persistKey, }) => {
    const stateContext = (0, observe_1.createObserveContext)(initialState);
    const dispatchContext = (0, react_2.createContext)(() => { });
    function syncTabs(event) {
        const { dispatch } = store;
        if (event.key === persistKey && event.newValue !== event.oldValue) {
            dispatch({
                type: persist_1.INITIALIZE_STATE_FROM_STORAGE,
                payload: event.newValue ? JSON.parse(event.newValue) : event.newValue,
            });
        }
    }
    const store = {
        persistKey,
        dispatch: () => { },
        state: initialState,
        stateContext,
        dispatchContext,
        reducer,
        initialState,
        useState: () => {
            return (0, observe_1.useObserveContext)(stateContext);
        },
        useDispatch: () => (0, react_2.useContext)(dispatchContext),
        persist(state, action) {
            if (action.type !== persist_1.INITIALIZE_STATE_FROM_STORAGE) {
                storage === null || storage === void 0 ? void 0 : storage.setItem(persistKey, JSON.stringify(mapStateToPersist ? mapStateToPersist(state) : state));
            }
        },
        Provider: (props) => {
            return react_1.default.createElement(_1.Provider, { store: store, ...props });
        },
        async setToState() {
            var _a, _b;
            try {
                const storedState = await (storage === null || storage === void 0 ? void 0 : storage.getItem(persistKey));
                if (!storedState) {
                    return;
                }
                const stateObject = JSON.parse(storedState);
                const { dispatch } = store;
                const mappedState = mapStateToPersist
                    ? mapStateToPersist(stateObject)
                    : stateObject;
                dispatch({
                    type: persist_1.INITIALIZE_STATE_FROM_STORAGE,
                    payload: mappedState,
                });
                if (typeof window !== "undefined" && persistKey) {
                    /** Remove previously added event */
                    (_a = window.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(window, "storage", syncTabs);
                    /** Listening to events between tabs */
                    (_b = window.addEventListener) === null || _b === void 0 ? void 0 : _b.call(window, "storage", syncTabs);
                }
            }
            catch (error) {
                if (__DEV__) {
                    console.error(error);
                }
            }
        },
    };
    return store;
};
exports.createStore = createStore;
//# sourceMappingURL=createStore.js.map