Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Lost persist in Dynamic routes

See original GitHub issue

I have integrated your library with redux and redux-persist, everything works fine and persistent data is found when loading and reloading the page, but when reloading on dynamic routes the persistent data is lost. For example, the loading and reloading on “/home” everything works fine, but when “/posts/[id]” persistent data is lost

redux/store.js

import { createStore, compose, applyMiddleware, combineReducers } from 'redux'
import { persistStore } from 'redux-persist'
import { createWrapper } from "next-redux-wrapper";
import thunk from 'redux-thunk'
import { reducers } from 'redux/reducers/index'

const makeStore = () => {
  let store;
  let persistor;

  if (typeof window !== 'undefined') {
    const { persistCombineReducers } = require('redux-persist');
    const storage = require('redux-persist/es/storage').default;

    const config = {
      key: 'root',
      blacklist: ['search', 'database'],
      storage,
    }

    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
    // const composeEnhancers = compose;

    store = createStore(persistCombineReducers(config, reducers), composeEnhancers(
      applyMiddleware(thunk)
    ));

    persistor = persistStore(store)

    store.__persistor = persistor

  }
  else {
    const composeEnhancers = compose;

    store = createStore(combineReducers(reducers), composeEnhancers(
      applyMiddleware(thunk)
    ));

    store.__persistor = null
  }

  return store
}

export const wrapper = createWrapper(makeStore);

_app.js

import { Provider, useStore } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react'
import { wrapper } from 'redux/store'

function MyApp(props) {
  const { Component, pageProps } = props

  const store = useStore((state) => state);

  return (
    <React.Fragment>
      <Provider store={store}>
        <PersistGate persistor={store.__persistor} loading={null}>
          <Component {...pageProps} />
        </PersistGate>
      </Provider>
    </React.Fragment>
  );
}

export default wrapper.withRedux(MyApp);