反应原生 redux 导出默认连接答案

【问题标题】：React native redux export default connect反应原生 redux 导出默认连接
【发布时间】：2019-05-18 22:11:42
【问题描述】：

当我将 react-navigation 与 redux 一起使用时，我不想分离组件。如何制作“const =”而不是制作新文件并“导出默认值”

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

导出默认连接... 哪个是对的？

https://codeshare.io/G79NRk

【问题讨论】：

connect 返回一个组件。所以第一个
我上传了我的代码，上面写着 state.routes 未定义..codeshare.io/G79NRk

标签： javascript reactjs react-native redux react-redux

【解决方案1】：

这样做，在与使用默认连接导出的位置相同的文件中定义组件，并传入文件中定义的组件。

这些陈述应该有助于消除您的误解。

使用 react 导航，您拥有屏幕（组件）和导航器。导航器是使用屏幕（组件）创建的。

您使用 react-redux 的 connect 函数将组件连接到 redux 存储。您只需将组件包装在对连接的调用中，然后导出该组件的返回值，而不是组件本身。

当您创建导航器时，您需要为您的屏幕导入组件。

看下面三个页面，我们做一个组件，通过react-redux的connect函数导出连接到redux store的组件。

然后我们制作一个路由器，它从反应导航中导出单个堆栈导航器，它定义了一个屏幕，即定义的组件（如上所述）。

然后我给出了一个示例，说明如何在 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);

然后在使用反应导航定义导航器时导入此文件。

例如

router.js

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

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

在您的 App.js（根级别）中

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

export default class App extends Component {

    render () {

        return <Router/>;
    }
}

这样的事情应该能让你整理好东西！

【讨论】：