Инвариантное Нарушение при использовании Реакт-Редукс соединяется с Реактивно-нативным

Question

Я начал создавать собственное приложение и хочу добавить в него избыточность.Я много раз использовал REDEX с React-DOM, и у меня никогда не было проблем.Теперь с реактивно-родным я не могу заставить его работать.

Я запустил очень простое шаблонное приложение, но когда я добавляю connect HOC к своему компоненту, я получаю следующую ошибку:

Это код для моего компонента:

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore, combineReducers } from 'redux';
import { connect } from 'react-redux';
import { View } from 'react-native';

const mainReducer = (state = { msg: 'Hello World!' }, action) => {
    switch(action.type) {
        default: return state;
    }
};

const store = createStore(combineReducers({ mainReducer }));

class Main extends Component {
    render() {
        console.log('props: ', this.props);
        return (
            <View>{this.props.msg}</View>
        );
    }
}

const MainWithRedux = connect(state => ({ msg: state.msg }))(Main);
console.log('MainWithRedux: ', MainWithRedux);

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

Из console.log я вижу, что connect hoc действительно возвращаетсяобъект, а не компонент:

Я создал свой проект, используя react-native-create-app, и это мои зависимости:

"react": "16.6.3",
"react-native": "0.57.4",
"react-redux": "^7.0.2",
"redux": "^4.0.1"

Я что-то пропустил?Как правильно интегрировать реактив-редукс с реактивно-нативным?

Answer 1

Любой, кто сталкивался с этой проблемой, я полагаю, что это происходит из-за версий react-native и react-redux.Посмотрите это для чуть более подробной информации: https://github.com/reduxjs/react-redux/issues/1274

У меня была эта ошибка на react-native@0.56.1 и react-redux@7.0.3.В настоящее время я не могу обновить версию react-native, поэтому мне пришлось понизить версию react-redux.Я понизил его до react-redux@5.0.6 и теперь все работает.

Answer 2

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

Answer 3

При использовании подключения вы не указываете редуктор, из которого вам нужно импортировать 'msg'.

const MainWithRedux = connect(state => ({ msg: state.mainReducer.msg }))(Main);

Возможно, это решит вашу проблему.