将动作创建者传递给反应导航答案

【问题标题】：Passing in action creators to react-navigation将动作创建者传递给反应导航
【发布时间】：2017-07-31 05:11:20
【问题描述】：

我正在为我正在构建的 React Native 应用程序使用新的 react-navigation 库。我在将我的 ActionCreators 从 Nav 组件传递到其场景时遇到问题。

我有一个 AppContainer 来包装整个应用程序。

import React, { Component } from 'react';
import { DrawerNavigator, addNavigationHelpers } from 'react-navigation';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import { ActionCreators } from '../actions';

import DashboardContainer from './DashboardContainer';
import CustomersContainer from './CustomersContainer';


const ApplicationNavigation = DrawerNavigator({
  Dashboard: { screen: DashboardContainer },
  Customers: { screen: CustomersContainer },
});

class AppContainer extends Component {
  render() {
    return (
      <ApplicationNavigation />
    );
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(ActionCreators, dispatch);
}

export default connect(() => { return {} }, mapDispatchToProps)(AppContainer);

这是 CustomerContainer：

import React, {Component} from 'react';
import {View, Text, Button} from 'react-native';

export default class CustomerContainer extends Component {
    btnPressed() {
        this.props.listCustomers()
    }

    render () {
        return (
            <View style={{marginTop: 40}}><Text>Customer</Text>
            <Button onPress={() => this.btnPressed()} title="Press Me!" />
            </View>
        );
    }
}

现在我试图在我的CustomerContainer this.props.listCustomers() 中调用一个动作。问题是 ActionCreator 道具没有被传递到屏幕上。我尝试将screenProps 属性添加到ApplicationNavigation 组件：

但由于某种原因，当我这样做时，我的应用程序不显示任何屏幕，它只是空白且没有错误。

更新

所以我更新了我的CustomerContainer 文件：

import React, {Component} from 'react';
import {View, Text, Button} from 'react-native';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import { ActionCreators } from '../actions';

 class CustomerContainer extends Component {
    btnPressed() {
        console.log(this.props.listCompanyCustomers())
    }

    render () {
        return (
            <View style={{marginTop: 40}}><Text>Customer</Text>
            <Button onPress={() => this.btnPressed()} title="Press Me!" />
            </View>
        );
    }
}

function mapStateToProps(state) {
  return {
    companyCustomers: state.companyCustomers
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(ActionCreators, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(CustomerContainer);

现在可以了；但是，这感觉是不正确的做法。

【问题讨论】：

嗨罗德里戈。我也会这样做，但是在这种情况下动作没有被传递。我遇到了和你一样的问题。你能帮我吗？

标签： react-native react-navigation

【解决方案1】：

redux connect 主要做的是：

包装您的组件
声明 contextProps 以访问调度
将调度传递给您的组件道具。
如果您传递连接 mapDispatchToProps，则它会创建要调度的方法的映射。

因此，如果您连接 AppContainer，它的子级将不会获得这些调度方法，除非 AppContainer 将它们传递给它的子级（但这就是 connect 阻止的）。

所以总结一下，任何需要使用dispatch的组件都应该连接起来，否则不会得到。

如果您不想复制粘贴 mapDispatchToProps，您可以将其删除并改用 this.props.dispatch：

 import { ActionCreators } from '../actions';

 class CustomerContainer extends Component {
    btnPressed() {
        this.props.dispatch(ActionCreators.listCompanyCustomers());
    }

    render () {
        return (
            <View style={{marginTop: 40}}><Text>Customer</Text>
            <Button onPress={() => this.btnPressed()} title="Press Me!" />
            </View>
        );
    }
}

【讨论】：