Javascript 简单登录身份验证与Redux反应

我不确定我遗漏了什么，但我有一个简单的登录页面来验证用户

这是我处理登录的

LoginPage.js

函数

import { connect } from "react-redux";
import { loginUser } from "../actions/auth";

 ...

 << Class declarations >>
 ...

  handleLogin = e => {
    e.preventDefault();
    const creds = {
      username: e.target.username.value,
      password: e.target.password.value
    };
    console.log("Login data sent ", creds);
    loginUser(creds);
  };

 ...
    << Login Component rendered and form to handleLogin >>
 ...

export default connect(
  undefined,
  { loginUser }
)(Login);

我已将控制台日志放入以查看它的去向，但我只得到：

登录数据已发送{用户名：“测试”，密码：“测试”}

登录用户creds{用户名：“测试”，密码：“测试”}

它似乎没有走得更远，所以我在调度中没有看到任何东西

---

编辑：我补充说，我实际上已经在

LoginPage.js

中使用了

connect

，您的逻辑有问题，我想您需要post请求，如果您得到正确的响应，然后发送。函数中返回了一个函数。这样做没有任何意义。只要执行它

export const loginUser = creds => {
  console.log("login user creds ", creds);
  return dispatch => {
    console.log("inside dispatch ", creds);
    try {
      let response = API.post("api/login", {
        username: "eve.holt@reqres.in",
        password: "cityslicka"
      });

      console.log("Returned Data ", response);
      dispatch(receiveLogin(creds));
      return response;
    } catch (e) {
      console.log("Axios request failed ", e);
      return false;
    }
  };
};

---

使用分派函数作为参数是可以的。

为了让您的登录功能正常工作，我们需要进行几次更新

您可能已经对

React-Redux

流有点熟悉了

用户与组件交互时，会触发事件 （提交表单/登录）

我们通过调用

dispatcher

函数（我们导入并插入connect（）的函数）来处理事件，将 用户输入以制定对后端API的请求（redux thunk动作创建者）

如果需要，我们等待后端API验证用户凭据 如果成功，他们将返回令牌或用户负载（承诺处理人）

使用返回的对象分派一个操作，一些信息供我们的减速机执行 处理（实际行动调度）

因此，让我们尝试创建一些类似于该流的东西。首先，看起来您已经部分设置了事件处理程序。问题在于

logiuser（）

操作创建者没有隐式访问

dispatch

方法。您需要从道具中调用它：

  handleLogin = e => {
    e.preventDefault();
    const creds = {
      username: e.target.username.value,
      password: e.target.password.value
    };
    console.log("Login data sent ", creds);
    this.props.loginUser(creds);
  };

this.props.login用户

通过

connect（）

绑定了

dispatch

，在导入时直接调用它不会产生任何redux功能。这应该足以完成1和2

接下来我们需要解决第3个问题。此时，您应该能够执行

dispatch

函数中的逻辑。但是，逻辑是不同步的（即，执行流是不受控制的），它不会等待API返回某些内容后再继续

您可以为承诺处理引入

async/await

。在坚果壳中，它意味着在前进之前等待某件事情完成。请注意，这只适用于承诺

---

对于第4项，我必须让您决定如何将该数据传递给您的reducer:）

loginUser（creds）返回一个函数，而您没有调用该函数。您需要类似于
loginUser（creds）（调度）的东西Action连接不同部分时的一些困惑。。。现在来做减速机：）@Justin真棒！我很高兴这对你有帮助，把它写出来也让我有了更好的理解：）
export const loginUser = creds => {
  console.log("login user creds ", creds);
  return async (dispatch) => {
    console.log("inside dispatch ", creds);
    try {
      let response = await API.post("api/login", {
        username: "eve.holt@reqres.in",
        password: "cityslicka"
      });

      console.log("Returned Data ", response);
      dispatch(receiveLogin(creds));
      return response;
    } catch (e) {
      console.log("Axios request failed ", e);
      return false;
    }
  };
};