prevent persist/REHYDRATE on new page

Hello,

I’m not sure if this is an Issue but I didn’t found a soultion.

If I go from the root page to a new route for example /suche the “persist/REHYDRATE” event is fired. It shouldn’t since in my case the state should be the same for all routes.

Hope someone can help or look over it. Or give me an idea how solve it. I could try to catch the event in all the reducers but it isn’t a nice solution!

Thats is my setup:

import React from 'react';
import {render} from 'react-dom';
import Home from './components/Home';
import Suche from './components/Suche';
import WohnungView from './components/WohnungView';
import Impressum from './components/Impressum';
import Datenschutz from './components/Datenschutz';
import NotFound404 from './components/NotFound404';
import {Router, Route, browserHistory, Redirect} from 'react-router';
import {persistStore, autoRehydrate} from 'redux-persist'
import {Provider} from 'react-redux';
import {compose,createStore, applyMiddleware} from 'redux';
import reducers from './reducers';
import thunkMiddleware  from 'redux-thunk';
import promiseMiddleware from 'redux-promise-middleware';
import localForage from "localforage";


export const store = createStore(
    reducers,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
    compose(
        applyMiddleware(
            thunkMiddleware,
            promiseMiddleware()),
        autoRehydrate()
    )
);
const persistor = persistStore(store, {storage: localForage});
render(
    <Provider store={store} persistor={persistor}>
        <Router history={browserHistory}>
            <Route path="/" component={Home}/>
            <Route path="/suche" component={Suche}/>
            <Route path="/wohnung/:id" component={WohnungView}/>
            <Route path="/Impressum" component={Impressum}/>
            <Route path="/Datenschutz" component={Datenschutz}/>
            <Route path="*" component={NotFound404} />
        </Router>
    </Provider>,
    document.getElementById('root')
);

[rt2zz]

@MichaelRazum why are you calling persistStore inside of the Banner component? typically you would only call persistStore once in your root module, like you have in your OP. Removing persistStore from Banner should resolve it issue.

[MichaelRazum]

@rt2zz Thanks a lot for the help. I was not that familiar with the framework and copy and pasted a solution where the component waits till render is finished. Since only the banner should wait before it renders I placed that part of the code to the banner. Wasn’t aware that that can cause problems.