store.getState is not a function Redux-persist

Question

I'm trying to implement Redux-persist on my React Native app. Following the setup docs exactly, I changed my store.js from this:

import { applyMiddleware, createStore } from 'redux';
import * as thunkMiddleware from 'redux-thunk';

import reducers from '../reducers';

let middlewares = [thunkMiddleware.default];
const store = createStore(reducers, applyMiddleware(...middlewares));

export default store;

To this:

import { applyMiddleware, createStore } from 'redux';
import * as thunkMiddleware from 'redux-thunk';
import { persistStore, persistReducer } from 'redux-persist';
import AsyncStorage from '@react-native-community/async-storage';

import reducers from '../reducers';

const persistConfig = {
    key: 'root',
    storage: AsyncStorage,
};
const persistedReducer = persistReducer(persistConfig, reducers);

let middlewares = [thunkMiddleware.default];

export default () => {
    let store = createStore(persistedReducer, applyMiddleware(...middlewares));
    let persistor = persistStore(store);
    return { store, persistor };
};

But now, I'm getting the error TypeError: store.getState is not a function (In 'store.getState()', 'store.getState' is undefined).

Note: I've checked out many questions on stackoverflow with the same store.getState error, but they have very specific issues different from my setup.

Edit: Provider implementation (using RNNv2)

import { Navigation } from 'react-native-navigation';
import { Provider } from 'react-redux';

import store from '../../shared/redux/store';
import { registerScreens } from '../view/screens';
import { initialize } from './navigation';

/**
 * Register screens and components for react native navigation
 */
registerScreens({ store, Provider });


const app = () => {
  Navigation.events().registerAppLaunchedListener(() => {
    initialize();
  });
};

export default app;

Registerscreens:

const registerComponentWithRedux = (redux: any) => (
  name: string,
  component: any,
) => {
  Navigation.registerComponentWithRedux(
    name,
    () => component,
    redux.Provider,
    redux.store,
  );
};

export function registerScreens(redux: any) {
  registerComponentWithRedux(redux)(screen, screen.default);
  ...
}

Answer 1

The issue is with the export, you are exporting a function that returns store in a key. So if you update the store reference in register screens it will work.

import returnStoreAndPersistor from '../../shared/redux/store';

const {store} = returnStoreAndPersistor();
registerScreens({ store, Provider });