dispatch doesn't call reducer React Native - react-native

Question

I create a component (AlertChild) to show alerts using redux in React-Native.
Currently when I call the dispatch from another component(another class)and this return, then the alertchild shows the message ok, but when I call the dispatch from the same component (Login), the alert is not showed and I can verify than the reducer (AlertReducer) is not called because the console.log() (in class AlertReducer) shows nothing.
AlertReducer:
export function AlertReducer(state = {}, action: any) {
console.log("Dispatch: " + action);
switch (action.type) {
case "INFO":
return {
alert: {
type: "info",
message: action.message,
},
};
case "DANGER":
return {
alert: {
type: "danger",
message: action.message,
},
};
case "CLEAR":
return {};
default:
return state;
}
}
AlertActions:
function showInfo(message: string) {
return {
type: "INFO",
message,
};
}
function showDanger(message: string) {
return {
type: "DANGER",
message,
};
}
function clear() {
return { type: "CLEAR" };
}
export const AlertActions = {
showInfo,
showDanger,
clear,
};
AlertChild:
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Toast } from "native-base";
import { AlertActions } from "../Store/Actions/AlertActions";
const AlertChild = (visible = true) => {
const alert = useSelector((state) => state.alert.alert);
const dispatch = useDispatch();
useEffect(() => {
ShowAlert();
}, [visible, dispatch]);
function ShowAlert() {
if (visible && alert !== undefined && Object.keys(alert).length) {
Toast.show({
text: alert.message,
buttonText: "X",
type: alert.type,
duration: alert.type === "danger" ? 60000 : 6000,
});
dispatch(AlertActions.clear());
}
}
return <></>;
};
export default AlertChild;
Login:
import React, { useState, useEffect, useContext } from "react";
import { Text, TextInput, View, Image } from "react-native";
import { Button, Spinner } from "native-base";
import styles from "./Styles/LoginStyles";
import { useDispatch } from "react-redux";
import AlertChild from "../Components/AlertChild";
import { AlertActions } from "../Store/Actions/AlertActions";
const Login = (props: any) => {
const { navigation } = props;
const dispatch = useDispatch();
useEffect(() => {
dispatch(AlertActions.clear());
}, [dispatch]);
async function Test() {
dispatch(AlertActions.showInfo("Hello"));
}
return (
<View style={styles.container}>
<Button onPress={async () => await Test()}>
<Text>Test</Text>
</Button>
<AlertChild {...props} />
</View>
);
};
export default Login;
Why the alert message is not displayed immediately?

Answer 1

I just needed to put in AlertChild the const "alert" (selector) in the useEffect:
useEffect(()=>{
ShowAlert()
},[visible, alert, dispatch])