React Native：如何从自定义抽屉中调度 redux 操作

Question

我必须从 CustomDrawerContentComponent 发送 logoutUser() 操作。 我怎样才能做到这一点？ 我的应用程序中有 StackNavigator 和 Drawer Navigator。 还有一个 CustomDrawerComponent 来显示经过身份验证的用户的用户名以及抽屉中的注册按钮。 由于它在 class 之外，我无法使用道具进行调度。

主组件.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

您可以使用以下内容导入useDispatch

import { useDispatch } from 'react-redux'

然后像这样在你的handleSignOut中调用它：

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

Answer 2

您的组件未连接到 redux。除了声明之外，您没有在其他任何地方使用mapDispatchToProps 。 请使用connect()方法https://react-redux.js.org/api/connect