dispatch 不调用reducer React Native

Question

我创建了一个组件 (AlertChild) 以在 React-Native 中使用 redux 显示警报。 目前，当我从另一个组件（另一个类）调用调度并返回时，alertchild 显示消息正常，但是当我从同一个组件（Login）调用调度时，警报没有显示，我可以验证没有调用减速器 (AlertReducer)，因为 console.log()（在 AlertReducer 类中）什么也没显示。

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;
  }
}

警报操作：

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;

登录：

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;

为什么没有立即显示警报消息？

Answer 1

我只需要在 useEffect 中放入 AlertChild 的 const "alert"（选择器）：

useEffect(()=>{
    ShowAlert()
},[visible, alert, dispatch])