React Native + Redux - onPress dispatch an action and another function - react-native

Question

I have a list of team members that onPress will navigate to the next screen using react-navigation/StackNavigator. Depending on which team member is clicked, the next screen will have dynamically loaded the relevant team member information.
I have been able to achieve this by using Redux to change the state of who has been selected. However at the moment I am unable to figure how I can dispatch the action and trigger the function to navigate to the next screen.
Below is my component that holds the events in which I want to dispatch the action and navigation function. You can see the first team member 'Tim' has the navigation function. All other team members will dispatch their individual action types.
I'm fairly new to Redux I would appreciate if anyone could point me in the right direction of how to add these together.
The Repository can be found here - 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

How about something like:
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>
);
}
}
showTeamMember creates the handler function for onPress that call both the teamMemberCallback and the navTo function.