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

Question

我正在为我正在构建的 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);

这现在有效；然而，这似乎是不正确的处理方式。

Answer 1

redux connect 基本上做的是：

包装你的组件
声明 contextProps 以获得调度权限
将调度传递给您的组件 props。
如果您传递连接 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>
        );
    }
}

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

Passing in action creators to react-navigation

react-native

react-navigation