抽屉导航中的注销在使用异步存储的React Native中不起作用？

Question

I have created logout button in drawer navigation. When user clicks on logout button the button is getting clicked and Asyncstorage is also cleared but it is not navigating to login screen why so ? After user clicks on logout button it is getting clicked but user is not navigated to signup/signin ie login screen why so ?

drawernavigation component:

class DrawerScreen extends Component {

  logoutUser = async () => {
    console.log('Logout clicked')

      try {
        await AsyncStorage.clear();
        this.props.logout();
        this.props.navigation.closeDrawer();
        this.props.navigation.navigate('Login');
      } catch (error) {
         console.log("Error in clearing AsyncStorage", error);
      }
  }

  render () {

    const { logged_in_user } = this.props;

    return (
      <SafeAreaView style={{flex: 1}}>
        <ScrollView>

          <TouchableOpacity onPress={() => this.props.navigation.closeDrawer()}>
              <Image source={require('../../assets/images/close.png')} style={{width: 24, height: 24, resizeMode: 'contain', marginLeft: 15, marginTop: 15}}/>
          </TouchableOpacity>
    </ScrollView>

      <TouchableOpacity onPress={this.logoutUser}>
            <View style={styles.bottomDrawerItem2}>
                <Image source={require('../../assets/images/logout.png')} style={styles.drawerItemImage}/>
                <Text style={styles.drawerItemText}>Logout</Text>
            </View>
          </TouchableOpacity>
          </View>
      </SafeAreaView>
    );
  }
}

login screen:

class LoginContainer extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount = async () => {
        let { navigation, logged_in_user } = this.props;

        if (!logged_in_user) {
            logged_in_user = await AsyncStorage.getItem('logged_in_user');
            logged_in_user = JSON.parse(logged_in_user);
            this.props.login(logged_in_user);
            // TODO: Check if it's correct format
        }
        if (logged_in_user) {
            navigation.navigate('SignedIn');
        }
    }

    render() {
        return <LoginView {...this.props} />;
    }
}

navigation.js:

const DrawerNavigator = createDrawerNavigator({
    Home:{
        screen: TabNavigation,
    }
},
{
    initialRouteName: 'Home',
    contentComponent: DrawerScreen,
    drawerWidth: 300
},
);

    const AppStackNavigator = createStackNavigator({

        //important: key and screen name (i.e. DrawerNavigator) should be same while using the drawer navigator inside stack navigator.

        DrawerNavigator:{
            screen: DrawerNavigator,
            navigationOptions: {
                header: null
            }
        }
    });

    const SignedOutNavigator = createSwitchNavigator({
        Login: {
            screen: LoginContainer,
            navigationOptions: { header: null, gesturesEnabled: false }
        },
        SignedIn: {
            screen: AppStackNavigator,
            navigationOptions: { header: null, gesturesEnabled: false }
        }
    },
    {
        initialRouteName: 'Login',
    });

Redux:

actions:

function login(logged_in_user) {
  return {
    type: LOGIN,
    logged_in_user
  };
}

function logout() {
  return {
    type: LOGOUT,
  };
}

reducer:

const initialLoginState = {
  logged_in_user: null
};

function loginReducer(state = initialLoginState, action) {
  switch (action.type) {
    case LOGIN:
      return { ...state, logged_in_user: action.logged_in_user };
    case LOGOUT:
      return { ...state, logged_in_user: null };
    default:
      return state;
  }
}

Answer 1

Is logged_in_user a prop of LoginContainer? Be clear on where this variable is coming from. In this case that is AsyncStorage and not the props of the component. I suspect that logged_in_user is always resolving to false and that is why signout never works.

        let { navigation, login } = this.props;
        let logged_in_user = await AsyncStorage.getItem('logged_in_user');

        if (!logged_in_user) {

            logged_in_user = await AsyncStorage.setItem('logged_in_user', !logged_in_user);
            login(true);
        }
        if (logged_in_user) {
            logged_in_user = await AsyncStorage.setItem('logged_in_user', !logged_in_user);
            navigation.navigate('SignedIn');
        }