useGlobalState resetting when I navigate-CodePudding

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

CodePudding user response：

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!)