Javascript 如何从redux thunk操作返回承诺并在组件中使用它

我正在使用React+Redux+Redux Thunk+Firebase身份验证。用打字脚本写代码。 我的行动是：

//Type for redux-thunk. return type for rdux-thunk action creators
type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  IStoreState, //my store state
  null,
  Action<userActionTypes>
>

export const signInWithEmailAndPasword =(email:string, pasword:string): AppThunk=>{
  return async (dispatch)=>{
    auth.signInWithEmailAndPassword(email, pasword).then(response=>{
      if(response.user){
        const docRef = db.collection("users").doc(response.user.uid);
          docRef.get().then(function(doc) {
            if (doc.exists) {
              const userData = doc.data(); //user data from firebase DB
               //if user exists in DB, dispatch
               dispatch({
                type: userActionTypes.SIGN_IN_USER,
                payload: userData
              })
              return userData;
            } else {
                // doc.data() will be undefined in this case
                console.log("No such document!");
            }
        }).catch(function(error) {
            console.log("Error getting document:", error);
        });
      }
    })
    .catch(err=> dispatch(setUserError(err.message)))
  }
}

---

但是我不想使用

任何
Thunks返回函数，而不是承诺。为此，您可以查看
redux promise
。但老实说，如果你做了这么复杂的事情，你最好使用
redux-saga

另一种方法是使用
reduxapi中间件
背后的概念来创建您自己的定制redux中间件。我在过去做过这件事，是为了将消息队列连接到redux
 只需在此行之前添加
return
：

auth.signInWithEmailAndPassword(email, pasword).then(response=>{

因此，这将是：

export const signInWithEmailAndPasword =(email:string, pasword:string): AppThunk=>{
  return async (dispatch)=>{
    return auth.signInWithEmailAndPassword(email, pasword).then(response=>{

它应该会起作用
 PS在一个稍微相关的注释中，您可能会发现这个有趣的调度
thunk
不返回函数，它返回
thunk
返回的任何内容。引入陡峭的学习曲线和疯狂的复杂度
redux saga
对于这样一个小问题来说是大材小用。Thunks只会导致疯狂的不可维护代码，该示例中有10级缩进！传奇故事非常直截了当，它们背后的概念可以在一天内被任何一个中等水平的程序员所掌握。你将如何为那个恶作剧编写单元测试？缩进主要来自IF语句。我添加它们是为了避免TS空检查。在这个actions函数中有两个函数。一个用于登录，一个用于数据库检查。我又可以把它们分开了。但我会在解决我的主要问题后再做。Thunks不会导致疯狂的不可维护代码-疯狂的不可维护代码会导致疯狂的不可维护代码（如OPs）。这不是因为它是一个重击而无法维护的疯狂。我从来没有在单元测试thunk时遇到过问题，将它控制在7-10行以内，你会没事的。你可以等待thunk-看起来可能只是库中的打字错误？如果您只是在该函数中执行了一个
async/await
，那么理想情况下，thunk操作会根据您传入的
then
发送另一个操作，而不是在组件中执行。顺便说一句，这个thunk真的很恶心，您正在使用承诺，但是嵌套它们而不是返回它们，您没有返回您的顶级承诺（这也是一个问题，即使typescript错误不存在）…到处都是yikes。我只是需要它在成功响应后重定向。我也尝试了。它不起作用。问题在于该操作的返回类型。我把它命名为
AppThunk
。但是如果我使用
any
，问题就会消失，我可以在itI上链接
。然后（）
。我不熟悉TS类型系统，但我认为它应该是Promise，例如Promise。当然，Promise类型应该是您返回的Promise的类型，而不是thunk。
auth.signInWithEmailAndPassword(email, pasword).then(response=>{

export const signInWithEmailAndPasword =(email:string, pasword:string): AppThunk=>{
  return async (dispatch)=>{
    return auth.signInWithEmailAndPassword(email, pasword).then(response=>{