Error Navigator when Logout with Redux in React Native

Question

I'm trying of create in my React Native App a simple Logout from my Home.tsx after a normal Login and after of to storage a user in my UserState with Redux.
Actually i have an error when i call the Logout function because when i use dispatch for delete action, the Navigator render again but i don't understand why this tries to render Home.tsx again, this provocate an error because only must render Home.tsx if exists an user:

Navigator.tsx: (I put console.log to see)

import React from 'react'
import { createStackNavigator } from '@react-navigation/stack'
import {connect} from 'react-redux'
import Login from '../Views/Login'
import Home from '../Views/Home'

const Stack = createStackNavigator();

const Navigator= (props) =>{
  const {users} = props;
  return (
        <Stack.Navigator>
            {console.log('Navigator here, '+users.current)}
            {users.current ===null ? 
                (<>    
                    <Stack.Screen name="Login" component={Login}  options={{headerShown:false}}/>
                </>)
            :   (<>    
                    <Stack.Screen name="Home" component={Home} options={{headerShown:false}}/>
                </>)
            }
        </Stack.Navigator>
   );
}

const mapStateToProps=(state)=>{
   const {users} = state;
   return {users};
}

export default connect(mapStateToProps)(Navigator);

Home.tsx (I put Console.log in Logout function)

import React from 'react'
import {Text, Container, Content, View, Button, Icon} from 'native-base'
import Styles from './Styles/HomeStyles'
import {connect} from 'react-redux'
import GeneralFooter from '../Components/GeneralFooter'
import {Auth} from '../Services/Auth/AuthService'

const Home =(props) => {
   const {navigation, users} = props;

   return(
     <Container >
        <Content >      
            <View style={Styles.content}>                  
                <Text>Hola {users.current.id}</Text>
                <Button onPress={()=>Logout(users.current.id)} >
                    <Icon name='menu' />
                </Button>
            </View>
        </Content>
       <GeneralFooter /> 
     </Container>
   );

   async function Logout(id:string){
       console.log('Function start');
       await Auth.LogoutUser(id, props);
       console.log("NOW USERS: "+users.current);
       navigation.navigate('Login');
   }  
}

const mapStateToProps=(state)=>{
   const {users} = state;
   return {users};
}

export default connect(mapStateToProps)(Home);

AuthService.tsx (the action returns: {type : 'DELETE_USER',id} ) :

import {UserActions} from '../../Store/Actions/UserActions'

export const Auth={
  LoginUser,
  LogoutUser
}

async function LoginUser(...){
   //code...
}

async function LogoutUser(id: string, props: any){
  await props.dispatch(UserActions.Delete(id));
}

UserReducer.tsx:

const Initial_State={
    current:null
}

export function UserReducer(state=Initial_State, action:any){
  switch (action.type){
    case 'ADD_USER':
        return{
            ...state,
            current: action.user
        };
    case 'DELETE_USER':
        return{
            ...state,
            current: null
        };
    default:
        return state;
  }
}

And the error result is:

You can see how Navigator render again and users.current is null (after function start and the dispatch), but after the function shows users.current with value; only i need delete the user from state and return to Login.tsx.

Wen W Wen W · Accepted Answer · 2021-03-27T23:52:36

When you dispatch the function to delete the current user, the Home component is still being displayed. You can try navigate away from it before deleting:

const Home =(props) => {
   const {navigation, users} = props;

   return(
     <Container >
        <Content >      
            <View style={Styles.content}>                  
                <Text>Hola {users?.current.id}</Text>
                <Button onPress={()=>{navigation.navigate('Login');Logout(users.current.id);}}>
                    <Icon name='menu' />
                </Button>
            </View>
        </Content>
       <GeneralFooter /> 
     </Container>
   );

Error Navigator when Logout with Redux in React Native

1 Answers