アクションクリエイターを反応ナビゲーションに渡す

Question

私が構築しているReactネイティブアプリケーションに新しいreact-navigationライブラリーを使用しています。私は自分のNavコンポーネントから私の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); 

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

今、私は私のCustomerContainerthis.props.listCustomers()内のアクションを呼び出すようにしようとしています。問題は、ActionCreatorの小道具がスクリーンに渡されていないことです。

しかし、私は、この私のアプリがエラーなしでそのちょうど空白の任意の画面が表示されないん何らかの理由：私はApplicationNavigationコンポーネントにscreenProps小道具を追加することを試みました。

UPDATE

だから私は私の更新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); 

。しかし、これはこれについて間違ったやり方のように感じる。 Reduxの基本的にない接続は何

Answer 1

は次のとおりです。

1. コンポーネント小道具への発送を渡す
2. を派遣へのアクセスを得るためにあなたのコンポーネント
3. 宣言contextPropsを包みます。
4. connect mapDispatchToPropsを渡すと、ディスパッチするメソッドのマッピングが作成されます。

あなたがAppContainerに接続すると、AppContainerが子にそれらを渡さない限り、その子はこれらのディスパッチメソッドを取得しません。

したがって、合計すると、ディスパッチを使用する必要があるコンポーネントを接続する必要があります。そうでない場合は、ディスパッチを使用できません。

あなたが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> 
     ); 
    } 
}