CODEWITHSUNDEEP
reactjsreact-nativereduxredux-sagaredux-persist
thodwris
thodwris

Reputation: 1377

React with redux-persist when navigate the UI is stuck

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!

Upvotes: 0

Views: 835

Answers (1)

Colin Ricardo
Colin Ricardo

Reputation: 17249

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.

Upvotes: 1

Related Questions