Implementing redux-persist - reactjs

Question

I'm trying to figure out how to configure redux persist in my application. I get a "'persistor' is not defined" in my react index.js file. I just need to persist a user_id so that when the page refreshes the data that is fetched on component did mount doesn't get lost.
this is my store.js file
import { createStore, combineReducers, applyMiddleware } from 'redux';
import userReducer from './reducers/userReducer';
import promiseMiddleware from 'redux-promise-middleware';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
const rootReducer = combineReducers({
userReducer
});
const persistConfig = {
key: 'root',
storage,
}
const persistedReducer = persistReducer(persistConfig, rootReducer)
export default () => {
let store = createStore(persistedReducer, applyMiddleware(promiseMiddleware))
let persistor = persistStore(store)
return { store, persistor }
}
//export default createStore(rootReducer, applyMiddleware(promiseMiddleware));
and this is my index.js file in my react app.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { HashRouter as Router } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './redux/store';
import { PersistGate } from 'redux-persist/integration/react'
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Router>
<App />
</Router>
</PersistGate>
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();

Answer 1

The store you're importing is a function that should be fired to get the actual store along with the persistor.
Refactor your store import to look like this
import useStore from './redux/store';
const { store, persistor } = useStore();
OR:
Refactor your store.js file
let store = createStore(persistedReducer, applyMiddleware(promiseMiddleware));
let persistor = persistStore(store);
export { store, persistor }
And import it from your index.js file like this
import { store, persistor } from './redux/store';