CODEWITHSUNDEEP
navigationreact-nativeredux
Johan Wiström
Johan Wiström

Reputation: 373

React - Navigate to Redux connected component

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

Upvotes: 2

Views: 636

Answers (1)

just-boris
just-boris

Reputation: 9746

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}.

Upvotes: 2

Related Questions