useGlobalState resetting when I navigate

Question

So I am using a Global state to store whether a user is logged in or not and his image. I use the loggedIn to show or hide the menu and notification buttons and use the imagepath to get the users image. This is my GlobalStates.js file:

import {createGlobalState} from 'react-hooks-global-state'

const {setGlobalState, useGlobalState} = createGlobalState({
    loggedIn: false,
    image: "Loading",
});
export {useGlobalState, setGlobalState};

This is what I have in my App.js:

const [loggedIn] = useGlobalState("loggedIn")
const [imagePath] = useGlobalState("image")

I then use these variables to perform various actions. This works perfectly when I log in however, when I navigate to any other page the Global variables reset to their initial values :false and "Loading"

Bonus question: How can I set the loggedin and imagepath variables in the same line

Answer 1

You have to save the variable in the session storage and recover it for the initial state.

Here an example

import React, { useEffect } from 'react';

import { createGlobalState } from 'react-hooks-global-state';

const initialStateSaved =  window.sessionStorage.getItem("reducer") && JSON.parse( window.sessionStorage.getItem("reducer"));

const initialState = {
  loggedIn: false,
  image: "Loading",
};

const { setGlobalState, useGlobalState } = createGlobalState(initialStateSaved || initialState);

function Question25() {

  const [loggedIn] = useGlobalState("loggedIn")

  useEffect(() => {
    if (!loggedIn) {
      // login

      const nextState = {
        image: 'zaquielverse',
        loggedIn: true,
      }

      setGlobalState('image', nextState.image);
      setGlobalState('loggedIn', nextState.loggedIn);

      window.sessionStorage.setItem("reducer", JSON.stringify(nextState));
    }
  }, []);

  return (
    <div>Question25</div>
  );
}

export default Question25;

I let you a second example with the "createStore"

import React, { useEffect } from 'react';

import { createStore, createGlobalState } from 'react-hooks-global-state';

const initialStateSaved = window.sessionStorage.getItem("reducer") && JSON.parse(window.sessionStorage.getItem("reducer"));

const initialState = {
  loggedIn: false,
  image: "Loading",
};

const reducer = (state, newState)  => {
  window.sessionStorage.setItem("reducer", JSON.stringify(newState));
  return newState;
}

const store = createStore(reducer, initialStateSaved || initialState);

const { useStoreState, dispatch } = store;

function Question25() {

  const loggedIn = useStoreState('loggedIn');

  useEffect(() => {
    if (!loggedIn) {
      dispatch({
        image: 'zaquielverse',
        loggedIn: true,
      });
    }
  });

  return (
    <div>Question25</div>
  );
}

export default Question25;

I hope these examples are useful for you (you can copy and paste to check how it works!)