1

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

我有一个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);

这是客户容器：

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);

这现在有效；然而，这感觉是不正确的做法。

4

1 回答 1

0

redux connect 主要做的是：

  1. 包装你的组件
  2. 声明 contextProps 以访问调度
  3. 将调度传递给您的组件道具。
  4. 如果您传递连接 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>
        );
    }
}
于 2017-03-10T08:01:24.357 回答