TypeError: undefined is not an object (evaluating 'store.getState')

Question

I'm following the Let's Build: Cryptocurrency Native Mobile App With React Native + Redux tutorial.

When I create my store in App.js , the app works fine

import { createStore, applyMiddleware, compose } from 'redux';
import devTools from 'remote-redux-devtools';
import React, { Component } from 'react';
import { Platform, View } from 'react-native';
import { Provider } from 'react-redux';
import promise from 'redux-promise';
import thunk from 'redux-thunk';
import logger from 'redux-logger';

import { Header, CryptoContainer } from './src/components';
import rootReducer from './src/reducers';    

const middleware = applyMiddleware(thunk, promise, logger);

const Store = createStore(rootReducer, compose(middleware, devTools({
  name: Platform.OS,
  hostname: 'localhost',
  port: 5678
}), ));

export default class App extends Component {
  render() {
    return (
      <Provider store={Store}>
        <View>
          <Header />
          <CryptoContainer />
        </View>
      </Provider>
    );
  }
}

but when I move the store logic to a new file ./src/Store.js ,

import { Platform } from 'react-native';    
import { createStore, applyMiddleware, compose } from 'redux';
import devTools from 'remote-redux-devtools';
import promise from 'redux-promise';
import thunk from 'redux-thunk';
import logger from 'redux-logger';

import rootReducer from './reducers';

const middleware = applyMiddleware(thunk, promise, logger);

const Store = createStore(rootReducer,compose(middleware,devTools({
            name: Platform.OS,
            hostname: 'localhost',
            port: 5678
        }),
    )
);

export default Store;

and use it in App.js like

import React, { Component } from 'react';
import { View } from 'react-native';
import { Provider } from 'react-redux';

import { Header, CryptoContainer } from './src/components';
import { Store } from './src/Store';

export default class App extends Component {
  render() {
    return (
      <Provider store={Store}>
        <View>
          <Header />
          <CryptoContainer />
        </View>
      </Provider>
    );
  }
}

I get

TypeError: undefined is not an object (evaluating 'store.getState')

What's causing my build ( expo start ) to fail when I import Store.js ?

Answer 1

It seems the import statement is not right. It should be:

import Store from './src/Store';

Answer 2

if you're importing a single named export
eg where you've done export const MyComponent = () => {} you'd import it like
import { MyComponent } from "./MyComponent"

if you're importing a default export
eg where you've done const MyComponent = () => {} export default MyComponent you'd import it like
import MyDefaultComponent from "./MyDefaultExport"

Answer 3

I got this error because I was exporting the wrong component from my main App file.

I was exporting this:

import React from 'react'
import { Provider } from 'react-redux'
import { createAppContainer } from 'react-navigation'
import Navigator from './src/components/Navigator'
import { store } from './src/store'

const App = createAppContainer(Navigator);

const Wrapped = props => (
  <Provider store={store}>
    <App />
  </Provider>
)

export default Provider; // wrong!

That last line should be:

export default Wrapped; // right!

Answer 4

The answer from Itunu Adekoya shows that you can decide how you want to export / import, and in this case about personal preference, as there isn't a perf difference.

In the case where you have a lot of exports from a file, and perhaps some are unrelated or won't all be used together, it is better to export them individual as consts and then in other file only import what you need via import { } format, this will be sure to only include relevant imprts

Answer 5

in my case its casing & named import issue. imported as

import store from './Redux/Store'

it should be

import {Store} from './Redux/Store'