[英]Pass data from component to action and saga using React/Redux saga
[英]Pass data from component to action and saga using ARc/React/Redux
我正在使用https://arc.js.org/來設置一個新項目,並對如何傳遞數據感到困惑。 我只是使用一個表單來發布一些登錄數據,並且似乎無法將數據發送到我的actions / sagas中的帖子(意思是,我的登錄表單組件有數據並嘗試發送它,但是在調度之后動作,值是未定義的)。
打算將表單值放入redux store(更新onChange可以在onSubmit上訪問,而不是像我現在那樣放棄),但是想讓這個版本先工作然后再繼續,這樣我就知道實際發生了什么。
如果在這里缺少必要的信息,請告訴我。
LoginFormContainer:
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)
LoginFormComponent:
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { Field } from 'components'
const Form = styled.form`
width: 100%;
`
const LoginForm = ({ handleSubmit }) => {
return (
<Form onSubmit={handleSubmit}>
<Field
label="Email"
name="email"
type="text"
/>
<Field
label="Password"
name="password"
type="text"
/>
<button type="submit">Login</button>
</Form>
)
}
LoginForm.propTypes = {
handleSubmit: PropTypes.func.isRequired,
handleChange: PropTypes.func.isRequired,
}
export default LoginForm
操作:
export const USER_LOGIN_REQUEST = 'USER_LOGIN_REQUEST'
export const USER_LOGIN_SUCCESS = 'USER_LOGIN_SUCCESS'
export const USER_LOGIN_FAILURE = 'USER_LOGIN_FAILURE'
// This doesn't know what data is (undefined)
export const userLoginRequest = (data, resolve, reject) => ({
type: USER_LOGIN_REQUEST,
data,
resolve,
reject,
})
export const userLoginSuccess = detail => ({
type: USER_LOGIN_SUCCESS,
detail,
})
export const userLoginFailure = error => ({
type: USER_LOGIN_FAILURE,
error,
})
傳奇故事:
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)),
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.