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'