时间戳

首页 > 解决方案 > 使用 Typescript 反应 Redux-Thunk

reactjs - 使用 Typescript 反应 Redux-Thunk

问题描述

所以我想用 Redux Thunk 输入我的 Redux Actions

这是一个动作

export function logout() {
  return async(dispatch) => {
    try {
      const value = localStorage.removeItem("token");

      dispatch(cons.updateLoginStatus(false));

      return true;

    } catch (err) {
      console.error(err);
    }
  }
}

这是连接文件

const mapStateToProps = (store: IAppState) => {
  return {
    isLoggedIn: store.employee.isLoggedIn
  }
}

const mapDispatchToProps = {
  logout
}

export default connect(mapStateToProps, mapDispatchToProps)(Auth);

当我打电话时，await this.props.logout();我想访问返回的true但打字稿只看到返回的函数。

那么如何键入函数以await获取返回值？

或者有没有更好的方法来做到这一点？

标签： reactjstypescriptreact-redux

解决方案

你正在尝试的似乎有点反模式。该功能旨在即开即弃，这样您就不会挂起 UI。登录功能应该分派给你的减速器，状态现在已经离开

loggedIn: false

至

loggedIn: true

如果您需要一些具有响应的魔法，也就是在登录失败时抛出异常，那么我会推荐类似的东西

this.props.login().catch(err => console.log(err)).then(() => doSomething));

但是，我强烈建议您只调度并收听 ComponentDidUpdate 生命周期挂钩来重定向或您可能需要做的任何事情。

推荐阅读