无法在本机中从应用程序注销？

Question

我正在使用Redux进行React Native项目。我有一个堆栈导航器和一个抽屉式导航器。 我无法从该应用程序注销。我要注销时更改储值。当我从注销onPress调度操作时。它引发错误：props.dispatch不是一个函数。我怎么打电话。我尝试了很多方式总是抛出错误。以及如何在注销时将所有reducer的值设置为初始状态？预先谢谢你

App.js

<RootStack.Navigator screenOptions={{
            headerShown: false
          }}>
            {/* <StatusBar backgroundColor={isLoading ? '#000000' : '#F3F3F3'} /> */}
            {this.props.data.splashScreen.loading ?
              (<RootStack.Screen name={'SplashScreen'} component={SplashScreen} />) :
              this.props.data.login.isAuthorized ?
                (<RootStack.Screen name="MainNavigator" component={MainNavigator} />)
                :
                (
                  <RootStack.Screen name="Login" component={MainStack} />)}
          </RootStack.Navigator>

splashScreen和登录名是减速器存储值

MainNavigator.js

const GradientHeader = (props) => (
    <View style={{ backgroundColor: "transparent" }}>
        <LinearGradient
            colors={["#6CCFF6", "#596AB2"]}
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 0 }}
            style={
                {
                    /* height: 128 */
                    /*  height: Header.HEIGHT  */
                }
            }
        >
            <Header {...props} />
        </LinearGradient>
    </View>
);

const DashboardStackScreen = ({ navigation }) => {
    return (
        <DashboardStack.Navigator
            screenOptions={{
                headerTitle: "Good Morning, John",
                header: (props) => <GradientHeader {...props} />,

                headerLeft: () => (
                    <TouchableOpacity onPress={navigation.openDrawer} style={{ padding: 20 }}>
                        <Image source={require("../assets/images/menu_bar.png")} style={{ width: 18, height: 12 }} />
                    </TouchableOpacity>
                ),
                headerTransparent: true,
                headerStyle: {
                    backgroundColor: "transparent",
                },
                headerTintColor: "#fff",
                headerTitleStyle: { fontFamily: "OpenSans-SemiBold", fontSize: 20 },
            }}
        >
            <DashboardStack.Screen name="Dashboard" component={Dashboard} />
        </DashboardStack.Navigator>
    );
};

export default ({ navigation }) => {
    return (
        <Drawer.Navigator
            initialRouteName="Dashboard"
            drawerContent={(props) => <DrawerContent {...props} />}
            hideStatusBar={false}
            focused={true}
            labelStyle={{ fontSize: 14, fontFamily: "OpenSans-SemiBold" }}
            drawerContentOptions={{ activeBackgroundColor: "#F1F1F1", activeTintColor: "#000000", inactiveTintColor: "#818181", itemStyle: { marginLeft: 0, paddingHorizontal: 10, width: "100%", borderRadius: 0 } }}
        >
            <Drawer.Screen
                name="Dashboard"
                component={DashboardStackScreen}
                options={{
                    drawerIcon: ({ focused, size }) => <Image source={require("../assets/images/dashboard.png")} style={{ height: 17.78, width: 16 }} resizeMode="contain" />,
                }}
            />
            <Drawer.Screen
                name="My Profile"
                component={MyProfileStackScreen}
                options={{
                    drawerIcon: ({ focused, size }) => <Image source={require("../assets/images/profile.png")} style={{ height: 16, width: 16 }} resizeMode="contain" />,
                }}
            />
        </Drawer.Navigator>
    );
};

DrawerContent.js

import { resetData } from "../Storage/Storage";
export function DrawerContent(props) {
    return (
        <SafeAreaView style={styles.baseContainer}>
            <KeyboardAvoidingView behaviour="padding" style={styles.baseContainer}>
                <TouchableWithoutFeedback style={styles.baseContainer} onPress={Keyboard.dismiss}>
                    <View style={styles.baseContainer}>
                        <TouchableOpacity
                            style={{ flex: 2, alignItems: "center", justifyContent: "center" }}
                            onPress={() => {
                                props.navigation.navigate("Dashboard");
                            }}
                        >
                            <Image source={require("../assets/images/MJB_Logo.png")} style={{ width: 197, height: 59 }} />
                        </TouchableOpacity>
                        <View style={{ flex: 5 }}>
                            <DrawerContentScrollView {...props}>
                                <DrawerItemList {...props} />
                                <DrawerItem
                                    labelStyle={{ fontSize: 14, fontFamily: "OpenSans-SemiBold" }}
                                    activeBackgroundColor="#F1F1F1"
                                    activeTintColor="#000000"
                                    inactiveTintColor="#818181"
                                    label="Logout"
                                    icon={({ focused, color, size }) => {
                                        return <Image source={require("../assets/images/logout.png")} style={{ height: 14.36, width: 14.36 }} resizeMode="contain" />;
                                    }}
                                    onPress={() => resetData()}
                                />
                            </DrawerContentScrollView>
                        </View>
                    </View>
                </TouchableWithoutFeedback>
            </KeyboardAvoidingView>
        </SafeAreaView>
    );
}

Storage.js

export const resetData = async () => {
    try {
        //await AsyncStorage.removeItem('isRemembered')
        await AsyncStorage.removeItem("userDetails");
    } catch (e) {
        // saving error
    }
};