It's my first time using Redux and Redux Persist. I got this error when I tried to run my application (in index.js line 20):
TypeError: undefined is not an object (evaluating 'store.getState')
index.js:
import React from 'react';
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
import { Provider } from 'react-redux';
import {persistor, store}from './store/configureStore';
import { PersistGate } from 'redux-persist/integration/react';
const RNRedux = () => (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App/>
</PersistGate>
</Provider>
)
AppRegistry.registerComponent(appName, () => RNRedux);
App.js:
import {createStackNavigator, createAppContainer} from 'react-navigation';
import Register from './components/Register';
import Home from './components/Home';
import Login from './components/Login';
const AppNavigator = createStackNavigator({
HomeScreen: {
screen: Home,
navigationOptions: {
title: 'Home',
header: null
}
},
LoginScreen: {screen: Login},
RegisterScreen: {
screen: Register,
navigationOptions: {
title: 'Register'
}
}
});
const App = createAppContainer(AppNavigator);
export default App;
configureStore.js:
import { createStore, combineReducers } from 'redux';
import userReducer from './reducers/user';
import { persistStore, persistCombineReducers, persistReducer } from 'redux-persist';
import storage from 'redux-persist/es/storage' // default: localStorage if web, AsyncStorage if react-native
import { AsyncStorage } from 'react-native';
const persistConfig = {
key: 'root',
storage
};
const rootReducer = persistCombineReducers(persistConfig, {
user: userReducer
});
const persistedReducer = persistReducer(persistConfig, rootReducer);
export default () => {
let store = createStore(persistedReducer)
let persistor = persistStore(store, {storage: AsyncStorage})
return { store, persistor };
}
You are exporting a function from configureStore.js
but trying to import {persistor, store}
in index.js
.
You should import the function instead and call it.
For example:
import configureStore from './store/configureStore';
const {store, persistor} = configureStore();
import thunk from "redux-thunk";
import { persistStore, persistReducer } from "redux-persist";
import { AsyncStorage } from "react-native";
import logger from "redux-logger";
const persistConfig = {
key: "root",
storage: AsyncStorage,
whitelist: ["authReducer"],
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
const middleWares = [thunk, logger];
const store = createStore(persistedReducer, applyMiddleware(...middleWares));
let persistor = persistStore(store);
export default { store, persistor };
I was getting the same error "undefined is not an object (evaluating 'store.getState')" My issue was solved after I removed the default keyword after export
export { store, persistor };
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With