React native redux export default connect

Question

I do not want to separate components when I am using react-navigation with redux. How can I make a "const=" rather than make a new file and "export default"

const IntroScreen2 =connect(mapStateToProps,mapDispatchToProps)(IntroScreen2a)
const IntroScreen2 =()=> connect(mapStateToProps,mapDispatchToProps)(IntroScreen2a)

export default connect ... which one is right?

https://codeshare.io/G79NRk

Answer 1

Do it something like this, define the component in the same file as where you use a default export of connect, passing in the component defined in the file.

These statements should help clear up your misunderstanding(s).

With react navigation, you have screens (components), and you have navigators. Navigators are created with screens (components).

You use react-redux's connect function to connect components to the redux store. You simply wrap a component in a call to connect, and export the return value of that, rather than the component itself.

When you create a navigator, you will need to import the components for your screens.

See the follow three pages, we make a component, export the component connected to the redux store, via react-redux's connect function.

Then we make a router, which exports a single stack navigator from react navigation, which defines a single screen, the component defined (mentioned above).

Then I have given an example of how you'd render that router, for example, inside your App.js.

some-component.js

import React, {Component} from "react";
import {connect} from "react-redux"

// Define the component
class SomeComponent extends Component {
    render() {
        return null;
    }
}

// Map dispatch to props
const mapDispatchToProps = (dispatch) => {
   return {};
}

// Map state to props
const mapStateToProps = (state) => {
    return {};
};

// Export the component, passed into the connect function from react-redux.
export default connect (mapStateToProps, {}) (SomeComponent);

Then just import this file when defining your navigator with react navigation.

For example

router.js

import SomeComponent from "./some-component.js";
import {createStackNavigator} from "react-navigation";

export default createStackNavigator({
     PageOne: {
          screen: SomeComponent
     }
});

In your App.js (root level)

import React, {Component} from "react";
import Router from "./router.js";

export default class App extends Component {

    render () {

        return <Router/>;
    }
}

Something like that should get you sorted!