navigation after dispatchin action redux with react native - react-native

Question

I try to introduce authentication react native app with redux, after dispatching the login action.The code in the Login Screen:
const dispatch = useDispatch();
const auth = useSelector(state => state.authentication);
const onSubmit = (data: {email: string; password: string}) => {
dispatch(loginUser(data));
auth.isAuth && navigation.navigate('Home');
};
The code of action login is :
export const loginUser = data => async dispatch => {
try {
const res = await axios({
method: 'post',
url: `${API_URl}/auth/login`,
data,
});
dispatch({type: LOGIN_SUCCESS, payload: res.data});
} catch (error) {
dispatch({type: GET_ERRORS, payload: error.response.data});
dispatch({type: LOGIN_FAILED, payload: error.response.data});
}
};
The code for reducer is above:
case LOGIN_SUCCESS:
case REGISTER_SUCCESS:
return {
...state,
user: payload.user,
isAuth: true,
message: null,
};
I want to navigate to another screen 'Home' but this is not done for the first time after dispatching login action although I have verified that the state is changed :
enter image description the console after press login button

Answer 1

You're calling onSubmit, which calls loginUser. At loginUser though, you have an API call which is async, which means that right after you call loginUser, auth.isAuth will always be false.
You need to make sure auth.isAuth === true on componentDidMount of your login screen, or use something like redux-observable to react to actions that are being dispatched and perform the navigation.