使用 ARc/React/Redux 将数据从组件传递到 action 和 saga

Question

我正在使用 https://arc.js.org/ 设置一个新项目，但对数据的传递方式感到困惑。我只是使用一个表单来 post 一些登录数据，似乎无法在我的 actions/sagas 中将数据获取到 post 本身（意思是，我的登录表单组件有数据并尝试继续发送，但在发送操作后，值未定义）。

打算将表单值放入 redux 存储（更新 onChange 以便在提交时可以访问，而不是像我现在这样放弃），但希望先让这个版本工作然后再继续那个所以我知道实际上是什么正在发生。

如果此处缺少必要的信息，请告诉我。

登录表单容器：

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

Answer 1

感谢@dagatsoin 帮助引导正确的方向！

mapDispatchToProps 应该是：

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

使用 ARc/React/Redux 将数据从组件传递到 action 和 saga

Pass data from component to action and saga using ARc/React/Redux

javascript

reactjs

redux

redux-saga