javascript - Pass data from component to action and saga using ARcReactRedux - Stack Overflow

admin管理员组

文章数量:1416303

I'm using / to setup a new project and am confused on how data is passed about. I'm just using a form to post some login data and can't seem to get the data to the post itself in my actions/sagas (meaning, my login form ponent has the data and tries to send it on, but after dispatching the action, value is undefined).

Intending to get the form values into redux store (updating onChange to be accessible onSubmit, not passing up as I am now), but wanted to get this version working first and then move on to that so I know what's actually happening.

Let me know if missing necessary info here.

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 'ponents'

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-ponents'

import { Field } from 'ponents'

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

Actions:

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,
})

Sagas:

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)
}

I'm using https://arc.js/ to setup a new project and am confused on how data is passed about. I'm just using a form to post some login data and can't seem to get the data to the post itself in my actions/sagas (meaning, my login form ponent has the data and tries to send it on, but after dispatching the action, value is undefined).

Intending to get the form values into redux store (updating onChange to be accessible onSubmit, not passing up as I am now), but wanted to get this version working first and then move on to that so I know what's actually happening.

Let me know if missing necessary info here.

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 'ponents'

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-ponents'

import { Field } from 'ponents'

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

Actions:

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,
})

Sagas:

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)
}

• javascript
• reactjs
• redux
• redux-saga

Share Improve this question Follow asked Apr 19, 2017 at 18:05 megkadamsmegkadams 71711 gold badge1010 silver badges1919 bronze badges 4

• What do you get if you do console.log(serialize) in onSubmit? – dagatsoin Commented Apr 19, 2017 at 18:30
• loginData and serialize are good - when this.props.login is called it knows what it is (which is {email: "asdfasf", password: "asfsf"}). Then past that it just goes ¯_(ツ)_/¯ – megkadams Commented Apr 19, 2017 at 18:42
• in your mapDispatchProps second params you depose loginData. It should not be deposed, should it? – dagatsoin Commented Apr 19, 2017 at 20:53
• It should NOT, mixed examples code up. Thanks so much for pointing in the right direction! – megkadams Commented Apr 19, 2017 at 21:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Thanks to @dagatsoin for helping lead in right direction!

mapDispatchToProps should be:

const mapDispatchToProps = (dispatch) => ({
  login: (loginData) => dispatch(userLoginRequest(loginData)),
})

本文标签： javascriptPass data from component to action and saga using ARcReactReduxStack Overflow