dispatch 不调用reducer React Native

Posted 2023-03-17

【中文标题】dispatch 不调用reducer React Native

【英文标题】：dispatch doesn't call reducer React Native

【发布时间】：2021-11-29 05:04:21

【问题描述】：

我创建了一个组件 (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;

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

【问题讨论】：

问题是什么？为什么没有立即显示警报消息？还是根本没有调用 reducer？

@ridvanaltun 两者都有，但主要是为什么在调度后不显示警报？

【参考方案1】：

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

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