你好,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/