title: How to set up redux-persist with middlewares properly?
body: <p>I am new to react and redux. I am trying to apply redux-persist to my web but I got these two errors. Can't found what really make the errors. Need some help to fix this. Any help is highly appreciated!</p>
  <pre><code>1) Warning: Failed prop type: Invalid prop `store` of type `function` supplied to `Provider`, expected `object`.
  
  2) Uncaught TypeError: store.getState is not a function
  </code></pre>
  <p>In my Store.js,</p>
  <pre><code>import { composeWithDevTools } from 'redux-devtools-extension';
  import { createStore, applyMiddleware } from 'redux';
  import { persistStore } from 'redux-persist';
  import { persistedReducer } from './root-reducer';
  import thunk from 'redux-thunk';
  import logger from 'redux-logger';
  
  
  const middlewares = [thunk, logger];
  
  export default () =&gt; {
      let store = createStore(persistedReducer, composeWithDevTools(
          applyMiddleware(...middlewares),
      ));
      let persistor = persistStore(store)
      return { store, persistor }
  }
  </code></pre>
  <p>In my root-reducer.js</p>
  <pre><code>import { combineReducers } from 'redux';
  import { persistReducer } from 'redux-persist';
  import storage from 'redux-persist/lib/storage';
  
  import userReducer from './User/User.reducer.jsx';
  
  const persistConfig = {
      key: 'root',
      storage,
      whitelist: ['user']
  };
  
  const rootReducer = combineReducers({
      user: userReducer,
  });
  
  export const persistedReducer = persistReducer(persistConfig, rootReducer);
  </code></pre>
  <p>In my Index.js</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import { BrowserRouter } from 'react-router-dom';
  
  import { Provider } from 'react-redux';
  import store from './redux/store';
  import { PersistGate } from 'redux-persist/integration/react';
  import persistor from './redux/store';
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;PersistGate loading={null} persistor={persistor}&gt;
        &lt;BrowserRouter&gt;
          &lt;App /&gt;
        &lt;/BrowserRouter&gt;
     &lt;/PersistGate&gt;
    &lt;/Provider&gt;
    ,
    document.getElementById('root')
  );
  </code></pre>