store.getState is not a function Redux-persist - reactjs

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 });

Answer 2

If u use 'redux-persists' and return{store, persistor} from ../store just try THIS!!!!!
import returnStoreAndPersistor from "../../store";
const { store } = returnStoreAndPersistor()
console.log(store.getState())

Answer 3

For anyone who has this issue & is using Typescript where the only property on "getState()" is "_persist", the problem was for me caused by setting the type of your combined reducers to "any" due to the type error on supplying your store to persistStore:
Type AnyAction is not assignable to type {your action type}
When I fixed the above issue, the getState issue was resolved.
I fixed this by doing this:
const _ = (state: any = 0, _: AnyAction) => state;
const root = combineReducers({
_,
applicationStatusReducer,
...
});
It seems to resolve the issue (albeit in a hacky / not actually resolving the underlying issue kind of way), if you just add an empty reducer with the action type of "AnyAction" to it.

Answer 4

This issue is happening because this export default method instead of doing this you
can do it like this.
export let store = createStore(persistedReducer, applyMiddleware(...middleware));
export let persistor = persistStore(store);
sorry for any inconvenience

Answer 5

const store = createStore(persistedReducer, applyMiddleware(...middlewares));
const persistor = persistStore(store);
export { store, persistor };
and then
import { store, persistor } from '../../shared/redux/store';