你好,Stack溢出的好人。在过去的几个小时中,我一直在尝试解决一个问题。对于某些人来说,这可能是非常基础的,但是对我(Redux和React上的完整菜鸟)来说,这就像解决巴勒斯坦冲突。然而...

在我的React,Redux应用程序中,我希望用户能够登录。要实现登录功能时,我不知道是否需要在我的React应用程序中添加Redux,但是在观看了很多视频并阅读了一篇一堆东​​西,我确定我需要这样做(因为它看起来像铁杆一样)。

因此,我使用Redux-form来让用户输入电子邮件和密码:

LoginForm.js:

import React from 'react'
import { Field, reduxForm } from 'redux-form'

const LoginForm = ({ handleSubmit }) => {
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Email:</label>
        <Field name="email" component="input" type="text" />
      </div>
      <div>
        <label>Lösenord:</label>
        <Field name="password" component="input" type="password" />
      </div>
      <button type="submit">Submit</button>
    </form>
  )
}

export default reduxForm({
  form: 'login'
})(LoginForm)


这里的所有内容都可以正常运行,因为这基本上是从他们的文档中窃取的。在我的LoginContainer.js中,所有内容都变成cr * p:

LoginContainer.js:

import React, { Component } from 'react'
import { login } from '../../actions/login'
import LoginForm from './Views/LoginForm'
import { connect } from 'react-redux'

class LoginContainer extends Component {
  submit(values) {
    this.props.login(values)
  }

  render() {
    return (
      <div>
        <h1>hejsan</h1>
        <LoginForm onSubmit={this.submit.bind(this)} />
      </div>
    )
  }
}

function mapStateToProps(state) {
  return { auth: state.auth }
}

export default connect(mapStateToProps, login)(LoginContainer)


您可能会看到,我正在导入一个名为login的操作(源代码在后面),我正在导入表单,最后一部分我不太确定。

这是我的* login.js-action。

login.js:

import axios from 'axios'
import settings from '../settings'

axios.defaults.baseURL = settings.hostname

export const login = data => {
  return dispatch => {}
}


我知道这很令人讨厌。

但是我想做的是当我按下按钮时,我想在控制台中看到POST(404)请求。抱歉,这是一个很棘手的问题,顺便说一句,它更像是在寻求帮助。但是,当您拼命尝试进行这项工作时,您将开始做绝望的事情。

希望有人可以指导我在这里,将不胜感激。谢谢阅读。

最佳答案

在这种情况下,您要从动作创建者返回一个thunk(这意味着您的动作创建者将返回一个函数)。要启用此行为,您需要为商店分配一些特殊的中间件。最常见的解决方案是redux-thunk

然后,您有几个选择:

如果要跟踪商店中的加载状态(通常不需要),则可以从登录操作创建者中调度加载操作

const setLoginLoading = value => ({
  loginLoading: true
})

const setLoginData = data => ({
  loginData: data
})

const login = data => dispatch => {
  dispatch(setLoadingValue(true))
  // or your preferred promise enabled http lib
  // you should also handle errors here
  return fetch('/login', { method: 'POST', body: data })
    .then(res => res.json())
    .then(res => {
      dispatch(setLoginData(res))
      dispatch(setLoadingValue(false))
      return res
    })
}


如果您不在乎将加载/错误状态保存在商店中,则可以像现在一样简单地从组件中分派操作。如果您在动作创建者中返回了承诺,调度员也将返回该承诺。

submit(values) {
  this.props.login(values)
    .then( // etc
}


然后,您可以简单地将加载/错误状态保持在该组件的状态(使用setState)。

关于javascript - 身份验证React Redux应用程序,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45291247/

10-13 05:30