React Native + Redux - onPressはアクションと別の機能をディスパッチします

Question

私はチームメンバーのリストを持っており、反応ナビ/ StackNavigatorを使って次の画面に移動します。どのチームメンバーがクリックされたかに応じて、次の画面には関連するチームメンバー情報が動的にロードされます。

Reduxを使用して、選択した人の状態を変更することで、これを達成できました。しかし、現時点では、アクションをディスパッチして次の画面に移動するための機能をトリガーする方法を理解することができません。

以下は、アクションとナビゲーション機能をディスパッチするイベントを保持するコンポーネントです。最初のチームメンバー 'Tim'にナビゲーション機能があることがわかります。他のすべてのチームメンバーは、それぞれのアクションタイプをディスパッチします。

私はかなりReduxを使い慣れています。誰かが一緒に追加する方法の正しい方向を教えていただければ幸いです。

リポジトリはここで見つけることができます - Github

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

    const styles = StyleSheet.create({ 
     pane: { 
     width: 300, 
     height: 50, 
     padding: 10, 
     backgroundColor: 'lightgray', 
     alignItems: 'center', 
     justifyContent: 'center', 
     margin: 3 
     } 
    }); 

    function navTO(passBack, location) { 
     const { navigate } = passBack.props.navigation; 
     navigate(location) 

    } 

    export default class TeamList extends Component { 
     constructor(props) { 
     super(props); 
     } 

     render() { 
     const { passBack, location, whoSelected, Tim, Kate, Ian, Smita, Lee, Ben } = this.props; 

     return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center' }}> 
      <Text>{whoSelected}</Text> 
      <TouchableOpacity onPress={() => navTO(passBack, location)} style={styles.pane}> 
       <Text>Tim</Text> 
      </TouchableOpacity> 
      <TouchableOpacity onPress={Kate} style={styles.pane}> 
       <Text>Kate</Text> 
      </TouchableOpacity> 
      <TouchableOpacity onPress={Ian} style={styles.pane}> 
       <Text>Ian</Text> 
      </TouchableOpacity> 
      <TouchableOpacity onPress={Smita} style={styles.pane}> 
       <Text>Smita</Text> 
      </TouchableOpacity> 
      <TouchableOpacity onPress={Lee} style={styles.pane}> 
       <Text>Lee</Text> 
      </TouchableOpacity> 
      <TouchableOpacity onPress={Ben} style={styles.pane}> 
       <Text>Ben</Text> 
      </TouchableOpacity> 
      </View> 
     ); 
     } 
    } 

Answer 1

のようなものについてはどのように：

export default class TeamList extends Component { 
    constructor(props) { 
    super(props); 

    this.showTeamMember = this.showTeamMember.bind(this) 
    } 

    showTeamMember(teamMemberCallback) { 
    const { passBack, location } = this.props; 

    return() => { 
     teamMemberCallback(); 
     navTO(passBack, location); 
    } 
    } 

    render() { 
    const { Tim, Kate, Ian, Smita, Lee, Ben } = this.props; 

    return (
     <View style={{flex: 1, alignItems: 'center', justifyContent: 'center' }}> 
     <Text>{whoSelected}</Text> 
     <TouchableOpacity onPress={this.showTeamMember(Tim)} style={styles.pane}> 
      <Text>Tim</Text> 
     </TouchableOpacity> 
     <TouchableOpacity onPress={this.showTeamMember(Kate)} style={styles.pane}> 
      <Text>Kate</Text> 
     </TouchableOpacity> 
     <TouchableOpacity onPress={this.showTeamMember(Ian)} style={styles.pane}> 
      <Text>Ian</Text> 
     </TouchableOpacity> 
     <TouchableOpacity onPress={this.showTeamMember(Smita)} style={styles.pane}> 
      <Text>Smita</Text> 
     </TouchableOpacity> 
     <TouchableOpacity onPress={this.showTeamMember(Lee)} style={styles.pane}> 
      <Text>Lee</Text> 
     </TouchableOpacity> 
     <TouchableOpacity onPress={this.showTeamMember(Ben)} style={styles.pane}> 
      <Text>Ben</Text> 
     </TouchableOpacity> 
     </View> 
    ); 
    } 
} 

showTeamMemberteamMemberCallbackとnavTo機能の両方を呼び出すonPressためのハンドラ関数を作成します。