React组件和调度动作的异步问题

Question

我正在创建一个使用由express.js构建的API的React-Redux应用程序。

我有一个登录表单，当他/她尝试使用错误的凭据登录时，我想向用户显示一条消息。我试图以多种方式设计这种行为。在这里，我有一种非常合乎逻辑且完全同步的方式。

我设置了一个Login组件，从其道具的userActions中调用一个函数。组件通过export default connect(null, { login, register })(Login);连接。

让我们现在来看一下登录。我将把代码保留在那里，因为我不知道是否/如何影响我的登录功能。我的问题是，我可以创建通知，并且登录和验证按预期进行，但是我无法获得“身份验证”状态，这对于确定重定向是必要的。

我必须处理两种情况：

1. 登录成功=>重定向到显示欢迎消息的'/'；
2. 登录失败=>在同一页面上显示错误消息。

我可以创建创建的通知，并且登录和验证可以按预期进行，但是我无法获得“ auth”状态，这对于确定重定向是必要的。

有人可以帮我吗？谢谢！

onSubmit方法@ login.js：

onSubmit = async e => {
    e.preventDefault();

    const { name, email, password } = this.state;

    // Check For Errors
    {....}

    // Register or login and notify user
    let auth = false;
    if (this.state.register) {
      this.props.register({ name, email, password })
        .then((res) => { auth = res.success; console.log(`register then: ${res}`); })
    } else {
      this.props.login({ email: email, password: password })
        .then((res) => { auth = res.success; console.log(`login then: ${res}`); })
    }

    if (auth) { this.props.history.push('/') }
  }
登录方法@ userActions.js：

export const login = authData => async dispatch => {

  axios.post('/api/v1/users/login', authData)
    .then(res => {
      beginSession(res);

      dispatch({
        type: LOGIN,
        payload: res.data.user
      });

      notifyUser('login', dispatch, res);

      return { success: true }
    })
    .catch(err => {
      return { success: false }
    });

};

我正在创建一个React-Redux应用程序，它使用了用express.js构建的API。我有一个登录表单，当他/她尝试使用错误的凭据登录时，我想向用户显示一条消息。我已经尝试过...

Answer 1

这里是组件在API调用响应之前加载a