Нарушение инварианта: недопустимый тип элемента: ожидается строка с использованием connect ofact-redux

Question

Возможно, у меня небольшая проблема, но я не могу ее решить.У меня есть небольшое приложение React-Native, только один экран.

Redux используется в качестве магазина.Это строится через Экспо.При использовании connect ofact-redux я получил следующую ошибку: Нарушение инварианта: Нарушение инварианта: недопустимый тип элемента: ожидал строку (для встроенных компонентов) или класс / функцию (для составных компонентов), но получил:объект.Проверьте метод рендеринга Home.

Приложение работает, если компонент, отображаемый компонентом Home, не обернут в connect ().

Прикрепите код ниже.

App.js

import React from "react";
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Home from './src/pages/Home';
import { Provider } from 'react-redux';
import configureStore from './src/stores/store';

const { store } = configureStore();

function App() {
  return (
    <Provider store={store}>
      <AppContainer />
    </Provider>
  )
}

const MainNavigator = createStackNavigator({
  Home: { screen: Home }
},
  {
    headerMode: 'none',
    navigationOptions: {
      headerVisible: false,
    }
  }
);

const AppContainer = createAppContainer(MainNavigator);

export default App;

Home.js

import React from "react";
import { StyleSheet, View, Text, Dimensions } from "react-native";
import SwitchEventTypes from "../components/SwitchEventTypes";

class Home extends React.Component {
  constructor() {
    super();
  }

  render() {
    return (
      <View>
        <SwitchEventTypes />
      </View>
    )
  }
}

SwitchEventTypes.js

import React, { Component } from "react";
import { connect } from 'react-redux';
import { StyleSheet, View, Text, Dimensions, TouchableOpacity } from "react-native";
import { updateEventType } from '../actions/actions';

const mapDispatchToProps = (dispatch) => {
    return {
        updateEventType: (newEventType) => {
            dispatch(updateEventType(newEventType));
        }
    };
};

const mapStateToProps = (state) => {
    return {
        eventType: state.filter.eventType,
    };
};

class SwitchEventTypes extends React.Component {
    constructor() {
        super();
        this.state = {
            isSwitchEventTypeOn: true
        }

        this.handleEventTypeChange = this.handleEventTypeChange.bind(this);
    }

    handleEventTypeChange(newEventType) {
        this.props.updateEventType(newEventType);
    }

    render() {
        return (
            <View style={styles.switchTypesContainer}>
                {this.props.eventType === 'active' ? <Text>123</Text> : 
                  <Text>456</Text>
                }
            </View>
        )
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(SwitchEventTypes);

store.js

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers';

const middleware = [thunk];

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const composedEnhancers = composeEnhancers(
  applyMiddleware(...middleware),
)

export default () => {
  const store = createStore(rootReducer, composedEnhancers);
  return { store };
};

пакет.json

  "dependencies": {
    "expo": "^32.0.6",
    "expo-react-native-shadow": "^1.0.3",
    "expo-svg-uri": "^1.0.1",
    "prop-types": "^15.7.2",
    "react": "16.8.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.1.tar.gz",
    "react-native-calendars": "^1.32.0",
    "react-native-svg": "^9.4.0",
    "react-navigation": "^3.9.1",
    "react-redux": "^7.0.1",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "react-native-switch": "^1.5.0"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0",
    "redux-devtools-extension": "^2.13.8",
    "schedule": "^0.4.0"
  },

В чем может быть дело?Пожалуйста помоги.Спасибо.

Answer 1

Ваш mapDispatchToProps возвращает объект. Вам также не нужны дополнительные возвраты, так как функции жирной стрелки уже имеют неявный возврат. Сделает ваш код немного более читабельным.

const mapDispatchToProps = dispatch => ({
    updateEventType: (newEventType) => dispatch(updateEventType(newEventType));
});

const mapStateToProps = state => {
    eventType: state.filter.eventType, // might be worth your time to investigate selectors down the road
};