Global context resets when routing

Ionic Framework Ionic React
1

Hello friends.
I’m trying to use React states in an app-wide context so all my components and pages can access the most important variables in a convenient manner that updates them as well.
I’ve noticed that setting and accessing the state from the context works fine, but whenever the Route changes, my state/context is completely reset to the initial value.
I’ve spent the last two day trying to wrap my head around it, but I’m totally stuck.

This is the declaration of the Global Context itself:
GlobalContext.tsx

import { createContext } from "react";

export interface IGlobalState {
    prop1: boolean,
    prop2: string,
    prop2: string,
    [key: string]: any
}

export const initialState: IGlobalState = {
    prop1: true,
    prop2: "foo",
    prop3: "bar",
};

export const GlobalContext = createContext({
    globalState: initialState,
    setGlobalState: (GlobalState: any) => {}
});

I then create a Context provider:
App.tsx

import { GlobalContext, initialState } from './hooks/GlobalContext';
...
const App: React.FC = () => {
  const [globalState, setGlobalState] = React.useState(initialState);
  const globalContextState = { globalState, setGlobalState };

  return(
    <IonApp>
      <GlobalContext.Provider value={globalContextState}>
        <IonReactRouter>
          <IonRouterOutlet>
            <Route path="/" exact={true}>
              <Redirect to="/home" />
            </Route>
            <Route path="/home" exact={true}>
              <Home />
            </Route>
            <Route path="/settings" exact={true}>
              <Settings />
            </Route>
         </IonRouterOutlet>
        </IonReactRouter>
      </GlobalContext.Provider>
    </IonApp>
  );
}

In the components and pages I access the context like so:

import { GlobalContext, IGlobalState, initialState } from '../hooks/GlobalContext';
...
const {globalState, setGlobalState} = useContext(GlobalContext);

setGlobalState((prevState: IGlobalState) => {
  let state = {...prevState};
  state.prop1 = "someValue";
  return state;
});
...
<SomeComponent value={globalState.prop1} />

Again, setting the state itself works fine as does reading from it.
But whenever I route to another page, for example <Settings />, the global state gets reset to initialState.
Why is that? It’s mind boggling to me.

Note: I have tried moving the GlobalContext.Provider outside the <IonApp>-Tag, because I thought maybe the app needs to be a child component so the pages can access the context. That, however, did not work as well.

2

Usually the structure

<IonApp>
  <Context>
    <IonReactRouter>

should be fine. This is what I use in my app and I get a global context as expected (actually I have about 5 contexts stacked and no problem).

So, it may be that the way you are linking pages or redirecting within your app is causing the app to be reloaded instead of using a link. Can you share code on how you are actually redirecting/routing in app?

3

Yes! Thank you friend!

I was using href properties in <IonItems, which was wrong! I should have used routerLink-properties instead.

Thank you very much! This has concluded days of struggle.

1 Like