Javascript 使用ARc/React/Redux将数据从组件传递到动作和传奇
我习惯于设置一个新项目,对数据是如何传递的感到困惑。我只是使用一个表单发布一些登录数据,在我的操作/传奇中似乎无法将数据发送到帖子本身(这意味着,我的登录表单组件拥有数据并试图发送数据,但在发送操作后,值未定义) 打算将表单值放入redux存储(更新onChange以便在Submit上可以访问,而不是像我现在这样放弃),但想先让这个版本工作,然后再继续,这样我就知道实际发生了什么 如果这里缺少必要的信息,请告诉我 LoginFormContainer:Javascript 使用ARc/React/Redux将数据从组件传递到动作和传奇,javascript,reactjs,redux,redux-saga,Javascript,Reactjs,Redux,Redux Saga,我习惯于设置一个新项目,对数据是如何传递的感到困惑。我只是使用一个表单发布一些登录数据,在我的操作/传奇中似乎无法将数据发送到帖子本身(这意味着,我的登录表单组件拥有数据并试图发送数据,但在发送操作后,值未定义) 打算将表单值放入redux存储(更新onChange以便在Submit上可以访问,而不是像我现在这样放弃),但想先让这个版本工作,然后再继续,这样我就知道实际发生了什么 如果这里缺少必要的信息,请告诉我 LoginFormContainer: import React, { Compo
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { userLoginRequest } from 'store/actions'
import { fromUser } from 'store/selectors'
import { LoginForm } from 'components'
class LoginFormContainer extends Component {
static propTypes = {
login: PropTypes.func.isRequired,
}
onSubmit = (event) => {
event.preventDefault()
const serialize = new FormData(event.target)
const loginData = {
email: serialize.get('email'),
password: serialize.get('password'),
}
this.props.login(loginData)
}
render() {
return <LoginForm handleSubmit={this.onSubmit} />
}
}
const mapStateToProps = (state) => ({
user: fromUser.getUser(state),
})
const mapDispatchToProps = (dispatch, { loginData }) => ({
login: () => dispatch(userLoginRequest(loginData)),
})
export default connect(mapStateToProps, mapDispatchToProps)(LoginFormContainer)
传奇故事:
import { take, put, call, fork } from 'redux-saga/effects'
import api from 'services/api'
import * as actions from './actions'
// This doesn't know what loginData is (undefined)
export function* login(loginData) {
try {
const encoded = window.btoa(`${loginData.email}:${loginData.password}`)
const data = yield call(api.post, '/login', { Authorization: `Basic ${encoded}` })
yield put(actions.userLoginSuccess(data))
} catch (e) {
yield put(actions.userLoginFailure(e))
}
}
export function* watchUserLoginRequest() {
while (true) {
const { data } = yield take(actions.USER_LOGIN_REQUEST)
yield call(login, data)
}
}
export default function* () {
yield fork(watchUserLoginRequest)
}
感谢@dagatsoin帮助我们朝着正确的方向前进 mapDispatchToProps应为:
const mapDispatchToProps = (dispatch) => ({
login: (loginData) => dispatch(userLoginRequest(loginData)),
})
如果在onSubmit中执行
console.log(serialize)
,您会得到什么?loginData和serialize很好-当调用this.props.login时,它知道它是什么(即{电子邮件:“asdfasf”,密码:“asfsf”})。然后就过去了_(ツ)_/''在mapDispatchProps的第二个参数中,您分解了loginData。它不应该被分解,是吗?不应该,混合了示例代码。非常感谢您指出了正确的方向!
import { take, put, call, fork } from 'redux-saga/effects'
import api from 'services/api'
import * as actions from './actions'
// This doesn't know what loginData is (undefined)
export function* login(loginData) {
try {
const encoded = window.btoa(`${loginData.email}:${loginData.password}`)
const data = yield call(api.post, '/login', { Authorization: `Basic ${encoded}` })
yield put(actions.userLoginSuccess(data))
} catch (e) {
yield put(actions.userLoginFailure(e))
}
}
export function* watchUserLoginRequest() {
while (true) {
const { data } = yield take(actions.USER_LOGIN_REQUEST)
yield call(login, data)
}
}
export default function* () {
yield fork(watchUserLoginRequest)
}
const mapDispatchToProps = (dispatch) => ({
login: (loginData) => dispatch(userLoginRequest(loginData)),
})