redux sagaとreduxフォームを使用して反応アプリにフォームエラーを表示

Question

私はredux sagaを使用してログイン還元フォームにエラーを表示する方法を理解しようとしています。私は要求をすることができますが、もしその応答が403 - 禁止されているなら、何らかの形でユーザーにメッセージを表示する必要があります。

システム：

• は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を私のサガで投げなければならないのでしょうか、それとももっと良い方法がありますか？

Answer 1

これは通常、reduxグローバル状態が再生される場所です。

actions.jsファイルのアクションタイプは、REQUEST_SUBMITです。私はそこにもREQUEST_SUCCESSFULがあると仮定しています。なぜなら、apiコールが成功したときにそれをあなたの佐賀で派遣しているからです。

httpリクエストのような非同期のものでは、リクエスト/レスポンス/エラーフロー全体に対して3つのアクションがある可能性があります。

あなたの佐賀でその例外を捕まえたら、この3回目のREQUEST_FAILEDアクションをディスパッチし、エラーメッセージをアクションペイロードとして送ります。

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

その後、あなたreducers.jsに、あなたはあなたの減速は、このアクションタイプのために聞く必要があるだろうし、お使いのエラーメッセージを表示して状態を更新します。

最後に、あなたのコンポーネントのmapStateToProps関数を定義して、このエラーメッセージにアクセスし、connect呼び出しに渡します。 この部分は、react-redux libの入門ドキュメントのかなりの部分です。

Answer 2

Redux-formは、送信ハンドラが約束を返すことを望み、拒否されたことによるエラーを表示します。

最も簡単な方法は次のようにいくつかのグルーコードを使用することです：https://github.com/mhssmnn/redux-form-sagaまたは https://github.com/afitiskin/redux-saga-routines

それは非常にシンプルなグルーコードです：

• 戻る約束
• /ハンドラを拒否する決意と行動を派遣その上に
• それからフォーム固有のアクションを実行するためにサガを使用
• あなたのサガから、ディスパッチf https://redux-form.com/7.1.2/docs/api/actioncreators.md/
  ：ORM固有の成功/失敗のアクション
• を糊コールが解決/または、手動でReduxの-フォームアクションクリエイターとフィールドエラーを設定することができ

呼び出されているの約束によって、上の拒否