How to keep React new Context API state when routing between Components?

Question

Summary:

1) Do you know how to keep the state of a Context Provider present when it is mounted/unmounted through routing? 2) Or do you know a well maintained Flux implementation that supports multiple separated stores?

In detail:

Besides React components own state I've been using mostly redux so far. Besides not loving the idea of having every state managed globally, even though it might only be relevant for a subtree, it also becomes an issue for my new project.

We want to dynamically load components and add them via routing to the app. To be able to have components ready for plug and play, we want them to take care of their own state (store it, request it from the server, provide a strategy to modify it).

I read about how to dynamically add reducers to the global store with redux, but I actually find the approach of Reacts Context API much nicer where I can encapsulate some state in a Provider and can consume it wherever I need it.

The only issue I have is, that a Provider and a Consumer are React components, so if they are part of a component, that is mounted and unmounted through routing, the state that might have been created or fetched once, is gone.

It seems to me that there is no way to solve that, besides temporarily storing the state in the localstorage or on the server. If there is, please let me know!!!

If there shouldn't be a better solution:

I also thought about a more original Flux implementation that would allow multiple stores, which could be encapsulated with the relavant component subtree. But I haven't really found any well maintained Flux implementation besides Redux. Mobx being the exception, but I really prefer the reducer solution of Redux over the observable solution of Mobx. So again, if you know a multi store Flux implementation that is well maintained, please let me know!!!

I would be really happy about some feedback and hope you can point me into a direction that is more satisfiying than dynamic reducer Redux or temporarily persisted Context state.

Thanks a lot in advance!

Answer 1

Sorry that it's quite a late answer

Are you using React Router?

The state should be persisted and it shouldn't clear if you are navigating correctly. There should be no page reload as this will cause the state to clear.

Here is an example:

import { Router as RootRouter } from 'react-router-dom';
import Router from './routes/Router';

const App = () => {
    return (
        <MyContext value={useReducer(myReducer, initialState)}>
            <RootRouter history={browserHistory}>
                <Router />
            </RootRouter>
        </AuthContext>
    );
}

import About from '../components/About';

const Router = () => {
    return (
        <Switch>
            <Route exact path='/about' component={About}></Route>
        </Switch>
}

On your main home component, you have to use a Link or Navlink to "switch" between components. Therefore, you'll have something like...

import { Link } from 'react-router-dom';

<Link to="/about">About</Link>

This will navigate you to the about page in which you can still access the context stage where nothing is cleared.