I started building a react-native application and I want to add redux into it. I have used redux many times with react-dom and never had any problems. Now with react-native I can't make it work.
I started a very simple boilerplate application, but when I add the connect HOC to my component I get to following error:
This is the code for my component:
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>
);
}
}
From the console.log I can see that the connect hoc is indeed returning an object, not a component:
I created my project using react-native-create-app and these are my dependencies:
"react": "16.6.3",
"react-native": "0.57.4",
"react-redux": "^7.0.2",
"redux": "^4.0.1"
Am I missing something? How can I properly integrate react-redux with react-native?
