javascript - 使用 redux saga 和 redux 表单在 React 应用程序中显示表单错误

Question

我试图弄清楚如何使用 redux saga 在我的登录 redux 表单中显示错误。我可以发出请求，但如果响应是 403 - 禁止，我需要以某种方式向用户显示一条消息。

系统:

• react 16.0.0
• redux 3.7.2
• redux-form 7.1.2
• redux-saga 0.16.0

login-form.js

import React, {Component} from 'react';
import {Field, reduxForm} from 'redux-form';
import {connect} from 'react-redux';

import {submit} from '../../actions';

class Login extends Component {
  constructor(props) {
    super(props);

    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit(values) {
    this.props.submit(values);
  }

  renderField(field, label) {
    // ommited
  }

  render() {
    const {handleSubmit, error} = this.props;

    return (
      <Form onSubmit={handleSubmit(this.onSubmit)}>

        {error ? error : ''}

        <Field
          name="email"
          label="Email*"
          type="email"
          placeholder="Email"
          component={this.renderField}
        />
        <Field
          name="password"
          label="Heslo*"
          type="password"
          placeholder="Heslo"
          component={this.renderField}
        />
        <Button color="primary">Login</Button>
      </Form>
    );
  }
}

export default reduxForm({
  form: 'loginForm'
})(
  connect(null, {submit})(Login)
);

actions.js:

export const submit = function(data) {
  console.log("Action:", data);
  return {
    type: 'REQUEST_SUBMIT',
    data: data
  };
};

sagas.js:

import {takeEvery, fork, call, put} from 'redux-saga/effects';
import axios from 'axios';
import {SubmissionError} from 'redux-form';

async function submitToServer(data) {
  try {
    let response = await axios.post('http://localhost:3000/login', data);
    yield put({type: 'REQUEST_SUCCESSFUL', payload: result.data})
  } catch(error) {
    throw new SubmissionError({_error: "Some error message"});
  }
}

function* callSubmit(action) {
  yield call(submitToServer, action.data);
}

function* submitSaga() {
  yield takeEvery('REQUEST_SUBMIT', callSubmit);
}

export default function* root() {
  yield [
    fork(submitSaga)
  ];
}

一切都按预期进行，但我无法弄清楚如何实际使登录表单显示我的传奇中抛出的错误消息。我应该在我的传奇中真正抛出 SubmissionError 还是有更好的方法来做到这一点？

Answer 1

这通常是 redux 全局状态发挥作用的地方。

您的 actions.js 文件显示一种操作类型:REQUEST_SUBMIT。我假设那里还有 REQUEST_SUCCESSFUL ，因为当 api 调用成功时，您会在您的传奇中调度它。

对于像 http 请求这样的异步内容，您可能会对整个请求/响应/错误流程执行 3 个操作。

当您在传奇中捕获该异常时，您将分派(dispatch)第三个 REQUEST_FAILED 操作，并将错误消息作为操作负载。

yield put({ type: 'REQUEST_FAILED, payload: error });

然后在您的 reducers.js 中，您可以让您的 reducer 监听此操作类型，然后使用错误消息更新状态。

最后，在您的组件中，您可以通过定义 mapStateToProps 函数(将其传递给 connect 调用)来从您的状态访问此错误消息。这部分几乎是react-redux 库的入门文档中的内容。