store.dispatch is not a function - react native redux-persist with redux-thunk middlware

I am new to redux-persist and i am trying persist my states to local storage. Getting the above error.

I looked up in Stack Overflow for a solution but couldn't find a similar issue with a solution here. any help would be highly appreciated.

here is my store code:

import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import { createLogger } from "redux-logger";
import { createReactNavigationReduxMiddleware } from "react-navigation-redux-helpers";
import appReducer from "../reducers";


const persistConfig = {
  key: 'tcroot',
  storage: LocalStorage,
}

const persistedReducer = persistReducer(persistConfig, appReducer)

// instantiate logger middleware
const logger = createLogger();
const middleware = createReactNavigationReduxMiddleware(state => state.nav);

const composeEnhancers =
  (typeof window !== "undefined" &&
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) ||
  compose;

const configureStore = () =>
  createStore(
    persistedReducer,
    composeEnhancers(applyMiddleware(thunk, logger, middleware))
  );


export default configureStore;

and my app.js code :

import React, { Component } from "react";
import { Provider } from "react-redux";
import { PersistGate } from 'redux-persist/integration/react'
import configureStore from "./redux/store";
// import store from "./redux/store/dev";
import persistor from './redux/store/persistedStore';

import AppContainer from "./screens/AppContainer";

// const { store, persistor } = configureStore();
const store = configureStore();

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <AppContainer />
        </PersistGate>
      </Provider>
    );
  }
}