Использование метода connect-redux connect в response-navigation show error "Компонент для маршрута 'x' должен быть компонентом React

Question

Я использую response-redux, чтобы подключить redux к моему реактивному проекту, но когда я использую метод export default connect(state => ({ count: state.count }))(Test) и импортирую, чтобы реагировать на навигацию как creactStackNavigator({test:Test}), он показывает

The component for route 'test' must be a React component

import MyScreen from './MyScreen';
...
test: MyScreen,
}

, но когда яудалить connect() метод, он отлично работает

Окружение:

"react":16.8.4
"react-native":0.59.4
"react-redux": "7.0.2",
"redux": "4.0.1",
"react-navigation": "2.18.2",

Test.js

import React, { Component } from 'react';
import { Text, View,Button} from 'react-native';
import  {connect}  from 'react-redux';

class Test extends Component {

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>count:{this.props.count}</Text>
         <Button title="Increment" onPress={() => this.props.incrementCounter()}></Button>
         <Button title="Decrement" onPress={() => this.props.decrementCounter()}></Button>
      </View>
    )
}
}
const mapDispatchToProps = dispatch =>({
  incrementCounter: _ => dispatch({type:"INCREMENT_COUNTER"}),
  incrementCounter: _ => dispatch({type:"DECREMENT_COUNTER"}),
})
export default connect(state => ({ count: state.count }),mapDispatchToProps )(Test)

redurs.js

const INITIAL_STATE = {
    count: 1
}
export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case 'COUNTER_INCREMENT': {
            return (Object.assign({}, { ...state, count: state.count + 1}))
        }
        case 'COUNTER_DECREMENT': {
            return Object.assign({},{ ...state,  count: state.count - 1 });
        }
        default: {
            return state;
        }
    }
}

App.js

import React, { Component } from 'react';
import { Platform, } from 'react-native';
import { Provider } from 'react-redux';

import { createStackNavigator} from 'react-navigation';
import Test from './src/screens/test';
import Screen2 from './src/screens/screen2';
import { createStore } from 'redux';
import reducers from './reducers';

const store = createStore(reducers);

const AppNavigator = createStackNavigator({
  test: Test,
  screen2: Screen2
}, {
    headerMode: "none"
  });

export default class App extends Component {

  render() {
    return (
      <Provider store={store}>
        <AppNavigator />
      </Provider>
    );
  }
}

Ожидаемое поведение:

Он должен подключиться к хранилищу и отображать this.props.count значение

PS : это просто демонстрация моей проблемы, реальный код похож на эту демонстрацию

Answer 1

Я наконец-то решил свою проблему, понизив response-redux до 5.1.1, проблема в том, что в response-redux 7.0.2 connect() метод возвращает объект, но в react-navigation 2.18.2 предполагается, что это функция, я думаю, поэтомуэто несоответствие типов, поэтому я должен понизить реактив-редукс до 5.1.1, который я использовал ранее в другом проекте, в котором функция возврата метода connect(), как и ожидалось от реакции-навигации.

PS: это довольно странночто я настроил новый проект с настройкой среды вышеупомянутого вопроса, и он работает, но не работает над существующим проектом.

Answer 2

Вы должны использовать функцию mapStateToProps в своем компоненте как это

function mapStateToProps(state) {
    return {
        state
    }
}

function mapDispatchToProps() {
... your code to dispatch actions...
}

export default connect(mapStateToProps, mapDispatchToProps)(yourComponentName)