CODEWITHSUNDEEP
javascriptreact-nativeecmascript-6redux
Thomas
Thomas

Reputation: 6168

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

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?

Upvotes: 5

Views: 18219

Answers (5)

praveen seela
praveen seela

Reputation: 518

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

import store from './Redux/Store'

it should be

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

Upvotes: 1

Tyler Citrin
Tyler Citrin

Reputation: 31

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

Upvotes: 1

duhaime
duhaime

Reputation: 27574

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!

Upvotes: 1

Itunu Adekoya
Itunu Adekoya

Reputation: 86

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

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

Upvotes: 7

laurent
laurent

Reputation: 90736

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

import Store from './src/Store';

Upvotes: 16

Related Questions