用Typescript反应Redux-Thunk

Question

So I am trying to type my Redux Actions with Redux Thunk

Here is an Action

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

      dispatch(cons.updateLoginStatus(false));

      return true;

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

Here is the connect file

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

const mapDispatchToProps = {
  logout
}

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

When I call await this.props.logout(); I would like to access the returned true But typescript only sees the function being returned.

So how do I type the function to await for returned value?

Or is there any better way to do this?

Answer 1

What you're attempting seems a bit, anti-pattern. The function is meant to be fire and forget, so that you don't hang the UI. The login function should dispatch to your reducer that state has now gone from

loggedIn: false

to

loggedIn: true

If you need some magic with response aka throw an exception if login fails, then I would recommend something like

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

However, I strongly recommend you just dispatch and listen to ComponentDidUpdate lifecycle hook to redirect or whatever you may need to do.

Answer 2

您需要通过调度适当的操作来调用注销功能