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

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

Basically you can just add the code that dispatches the action inside onPress along with navigation code. Though I think you know that and I didn't get your question. Try to simplify the bottom line of what you aren't able to do if that's the case — Moti Azu

Michael Peyper Michael Peyper · Accepted Answer · 2017-06-27T13:19:03

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.

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

1 Answers