引入自其他文件的Async函数loginUserWithEmail未被触发如何解决？

问题根因 #

loginUserWithEmail 是基于Redux Thunk中间件规范封装的action创建函数，调用它本身只会返回一个接收dispatch、getState作为参数的异步函数，不会直接执行内部逻辑。你当前没有将这个返回的异步函数交给Redux的dispatch处理，因此函数内部的代码不会运行。

解决方案 #

根据你项目的Redux调用方式选以下任意一种即可：

1. 使用组件props中已绑定的action
   你当前Login组件的props已经传入了login参数，大概率是之前通过react-redux的connect方法已经将loginUserWithEmail绑定到了该属性上，直接调用即可：

   onSubmit: (values: LoginFormData) => {
       console.log("before loginuserwithemail");
       login(values, history);
       console.log("after")
   },
   

2. 使用useDispatch手动派发
   如果你项目用的是函数组件+Hooks写法，直接通过useDispatch获取派发器，手动派发action即可：
   首先在文件头部引入hook：

   import { useDispatch } from 'react-redux'
   

   组件内初始化dispatch实例：

   const dispatch = useDispatch()
   

   修改onSubmit内的调用逻辑：

   onSubmit: (values: LoginFormData) => {
       console.log("before loginuserwithemail");
       dispatch(loginUserWithEmail(values, history));
       console.log("after")
   },
   

内容的提问来源于stack exchange，提问作者Flinze