0
redux saga를 사용하여 로그인 단축 문자 양식에 오류를 표시하는 방법을 알아 내려고하고 있습니다. 요청을 할 수는 있지만 응답이 403 - 금지 된 경우 사용자에게 메시지를 표시해야합니다.redux saga 및 redux 양식을 사용하여 반응 앱에 양식 오류를 표시하십시오.
시스템 :
- 은 16.0.0
- REDUX 3.7.2
- REDUX 형식 7.1.2
- REDUX-사가 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을 던져야할까요, 아니면 더 좋은 방법이 있을까요?
고마워요.하지만 그건 제가 묻고있는 것이 아닙니다. 당신이 쓴 것의 어떤 것도 redux 형식에 오류를 추가하지 않습니다. 내가 redux 양식 밖에 내 자신의 상태에 어떤 오류를 추가 할 수 있지만, 내가 원하는 것은 실제로 요청을 실패하면 redux 양식 오류 필드를 채우는 것입니다. –