React with redux-persist when navigate the UI is stuck

Question

When I navigate through the app the UI is stuck although the url changes.

I would like to integrate redux-persist on my current app but it eventually drove me to a strange bug to me.

Note: I use also the redux-saga as middleware on creating the store.

store.js

import { createStore, applyMiddleware, compose } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web and AsyncStorage for react-native

import createSagaMiddleware from 'redux-saga'
import rootReducer from "../reducers/index";
import rootSaga from '../sagas/index'

const persistConfig = {
  key: 'root',
  storage,
}

const persistedReducer = persistReducer(persistConfig, rootReducer)

const sagaMiddleware = createSagaMiddleware()

const middleware = applyMiddleware(sagaMiddleware)

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

const store = createStore(
  persistedReducer,
  {},
  composeEnhancers(middleware)
)

export const persistor = persistStore(store)

sagaMiddleware.run(rootSaga)

export default store

window.store = store

When I comment in the Persist Gate component then the navigation works as intended.

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";
import { Provider } from 'react-redux'
import registerServiceWorker from "./js/registerServiceWorker";
import { PersistGate } from 'redux-persist/integration/react'
import store, { persistor } from './js/store';

ReactDOM.render(
  <Router>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </Router >,
  document.getElementById("root")
);
registerServiceWorker();

I hope I made myself clear!

@Colin thank you for the help! You are right. I had to wrap router in persist.. — thodwris
– thodwris, Commented Dec 5, 2018 at 22:53

Colin Burke · Accepted Answer · 2018-12-05 23:03:37Z

1

Try wrapping your Router with the PersistGate. The order of these higher order components matters for React Router. The way you have it now, when you change the url it's not triggering a re-render, so swapping the order should fix the issue.

answered Dec 5, 2018 at 23:03

Colin Burke

17.3k13 gold badges57 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React with redux-persist when navigate the UI is stuck

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related