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

Question

我正在关注Let's Build：Cryptocurrency Native Mobile App With React Native + Redux教程。

当我在App.js中创建我的商店时，该应用程序运行良好

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

但是当我将商店逻辑移动到新文件./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;

并在App.js中使用它

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

我得到

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

当我导入Store.js时，是什么导致我的构建 ( expo start ) 失败？

Answer 1

导入语句似乎不正确。 它应该是：

import Store from './src/Store';

Answer 2

如果您要导入single named export
例如，你在哪里完成export const MyComponent = () => {}你会导入它
import { MyComponent } from "./MyComponent"

如果您要导入default export
例如，你在哪里完成了const MyComponent = () => {} export default MyComponent你会导入它
import MyDefaultComponent from "./MyDefaultExport"

Answer 3

我收到此错误是因为我从我的主 App 文件中导出了错误的组件。

我正在导出这个：

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!

最后一行应该是：

export default Wrapped; // right!

Answer 4

Itunu Adekoya 的回答表明您可以决定导出/导入的方式，在这种情况下是关于个人偏好的，因为没有性能差异。

如果你从一个文件中导出了很多，并且可能有些是不相关的或者不会全部一起使用，最好将它们单独导出为常量，然后在其他文件中只导入你需要的内容通过 import { } 格式，这将确保只包含相关的 imprts

Answer 5

在我的例子中，它的外壳和命名的导入问题。 导入为

import store from './Redux/Store'

它应该是

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