react-native - Invariant Violation error when using Redux with react-native

Question

When I run my react React Native & Expo app on my phone the following error is displayed:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in.

The code is:

import React from 'react'
import View from 'react-native'

import { Provider } from "react-redux";
import configureStore from "./redux/store";
const { store } = configureStore();


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

and the file ./redux/store is:

import { applyMiddleware, createStore } from "redux";
import { persistStore, persistCombineReducers } from "redux-persist";
import storage from "redux-persist/lib/storage";
import thunk from "redux-thunk";
import user from "./userActions";

const middlewares = [thunk];

const persistConfig = {
  key: "root",
  storage
};

const reducer = persistCombineReducers(persistConfig, {
  user
});

const configureStore = () => {
  let store = createStore(reducer, applyMiddleware(...middlewares));
  let persistor = persistStore(store);
  return { store, persistor };
};

export default configureStore;

The dependencies I'm using are:

"@babel/core": "^7.1.2",
"eslint": "^5.6.0",
"expo": "^30.0.1",
"native-base": "^2.8.1",
"react": "^16.5.2",
"react-native": "https://github.com/expo/react-native/archive/sdk-29.0.0.tar.gz",
"react-redux": "^5.1.0",
"redux": "^4.0.1",
"redux-persist": "^5.10.0",
"redux-thunk": "^2.3.0"

Where am I wrong?

Update: Changed the App.js code solved the issue. The new code is

import React from "react";
import { AppLoading } from "expo";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/es/integration/react";
import configureStore from "./redux/configureStore";

import AppContainer from "./components/AppContainer";

const { persistor, store } = configureStore();

class App extends React.Component {
  state = {
    isLoadingComplete: false
  };

  render() {
    const { isLoadingComplete } = this.state;
    if (!isLoadingComplete) {
      return (
        <AppLoading
          startAsync={this._loadAssetsAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      );
    }
    return (
      <Provider store={store}>
        <PersistGate persistor={persistor}>
          <AppContainer />
        </PersistGate>
      </Provider>
    );
  }

  _handleLoadingError = error => {
    console.log(error);
  };

  _handleFinishLoading = async () => {
    this.setState({
      isLoadingComplete: true
    });
  };
}

export default App;

标签： react-nativereduxexporedux-persist

Answer 1

您的这部分代码不正确！

import View from 'react-native'

将其更改为：

import { View } from 'react-native'

我希望这会奏效:)