React - Navigate to Redux connected component

Question

I am trying to incorporate Redux into my React native application. I am using the React native Navigator component for app navigation. My renderScene method looks like this (with helper function):

var Login = require('./src/ui/views/login/login');
.
.
.
getRoute: function(routeName){

const Routes = {
  Login: Login,
  Waiting: Waiting,
  LogoView: LogoView
};

return Routes[routeName];

},

_renderScene: function(route, navigator) {
 var component = this.getRoute(route.name);
 console.log('Navigate to:');
 console.log(component);
 var props = {
  navigator: navigator
};
 return React.createElement(component, props);
},

I export the login component (and the others) like this:

module.exports = connect((state) =>{state.token})(Login);

It doesn't work to navigate to any view exported with Redux connect wrapper method. The error I get is "mapStateToProps must return an object. Instead received undefined". It works fine when exporting the components like this

module.exports = Login;

Since I want to implement Redux I would be very thankful for any help on exporting with redux "connect()" or any hint on what I am doing wrong

Many thanks!

/Johan

score 2 · Accepted Answer · edited May 23 '17 at 11:51

The error here in the arrow function inside connect. Curly braces don't work here as you expect. If you want to return an object, you should wrap it into parentheses:

module.exports = connect((state) => ({token: state.token}))(Login);

See this answer for all possible arrow function use-cases.

Also, {state.token} is not a valid object literal. You can use shorter form only with identifiers, like this {state}.

React - Navigate to Redux connected component

1 Answers1