React Native: How to dispatch redux action from Custom Drawer

Question

I have to dispatch logoutUser() action from CustomDrawerContentComponent. How can I do that? I have a StackNavigator as well as Drawer Navigator in my app. Also there is a CustomDrawerComponent to show the username of authenticated user as well as a sign up button in Drawer. Since it is outside the class, I'm unable to dispatch using props.

MainComponent.js

...other import statements
import {
  fetchDishes,
  fetchComments,
  fetchPromos,
  fetchLeaders,
  logoutUser,
} from "../redux/ActionCreators";

const mapDispatchToProps = (dispatch) => ({
  fetchDishes: () => dispatch(fetchDishes()),
  fetchComments: () => dispatch(fetchComments()),
  fetchPromos: () => dispatch(fetchPromos()),
  fetchLeaders: () => dispatch(fetchLeaders()),
  logoutUser: () => dispatch(logoutUser()),
});

const handleSignOut = () => {
  //Here I have to dispatch logoutUser() but props.logoutUser() says undefined.
};


const CustomDrawerContentComponent = (props) => (
  <ScrollView>
    <SafeAreaView
      style={styles.container}
      forceInset={{ top: "always", horizontal: "never" }}
    >
      <View style={styles.drawerHeader}>
        <View style={{ flex: 1 }}>
          <Image
            source={require("./images/newlogo.png")}
            style={styles.drawerImage}
          />
        </View>
        <View style={{ flex: 2 }}>
          <Text style={styles.drawerHeaderText}>Ristorante Con Fusion</Text>
        </View>
      </View>
      <View style={styles.displayName}>
        <Avatar
          title={props.screenProps.name.match(/\b(\w)/g).join("")}
          rounded
        >
          {" "}
        </Avatar>
        <Text style={{ fontSize: 22, marginLeft: 5, color: "#fff" }}>
          Hello, {props.screenProps.name}
        </Text>
      </View>
      <DrawerItems {...props} />
      <TouchableOpacity onPress={() => handleSignOut()}> //Here I am calling the function
        <View style={{ flexDirection: "row", justifyContent: "center" }}>
          <Icon name="sign-out" type="font-awesome" size={24} color="blue" />
          <Text>Sign Out</Text>
        </View>
      </TouchableOpacity>
    </SafeAreaView>
  </ScrollView>
);

const MainNavigator = createDrawerNavigator(
  {
    Home: {
      screen: HomeNavigator,
      navigationOptions: {
        title: "Home",
        drawerLabel: "Home",
        drawerIcon: ({ tintColor, focused }) => (
          <Icon name="home" type="font-awesome" size={24} color={tintColor} />
        ),
      },
    },
   
    ...
    ...
    ...
  {
    initialRouteName: "Home",
    drawerBackgroundColor: "#D1C4E9",
    contentComponent: CustomDrawerContentComponent,
  }
);

class Main extends Component {
  componentDidMount() {
    this.props.fetchDishes();
    this.props.fetchComments();
    this.props.fetchPromos();
    this.props.fetchLeaders();
  };

  render() {
    var displayName = this.props.user.user.displayName;
    if (displayName == undefined) displayName = this.props.user.name;
    return (
      <Fragment>
        <View
          style={{
            flex: 1,
            paddingTop:
              Platform.OS === "ios" ? 0 : Expo.Constants.statusBarHeight,
          }}
        >
          <MainNavigator screenProps={{ name: displayName }} />
        </View>
      </Fragment>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Main);

Answer 1

You can use the following to import useDispatch

import { useDispatch } from 'react-redux'

and then call it in your handleSignOut like so:

const handleSignOut = () => {
    const dispatch = useDispatch()
    dispatch(logoutUser())
    //Continue with normal logout and maybe other dispatches...
};

Answer 2

Your component is not connected to redux. You are not using mapDispatchToProps anywhere else besides declaring it. Please use connect() method https://react-redux.js.org/api/connect