使用react-redux与react-native连接时的不变违反

Question

我开始构建一个本机应用程序，我想在其中添加redux。 我已经将redux与react-dom一起使用了很多次，但从未遇到任何问题。现在，使用react-native，我无法使其正常工作。

我启动了一个非常简单的样板应用程序，但是当我将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专案确实返回了一个对象，而不是一个组件：

我使用react-native-create-app创建了项目，这些是我的依赖项：

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

我想念什么吗？如何正确地将react-redux与react-native集成在一起？

Answer 1

使用connect时，您未指定需要从中导入'msg'的reducer。

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

也许可以解决您的问题。

Answer 2

任何人都遇到此问题，我相信这是由于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 3

只是为了防万一而扔掉它，因为我自己一直在努力解决这个非常神秘的错误。我最终发现我是从react-navigation而不是react-redux导入Provider的。