ReduxフォームでのAJAXエラーの処理

Question

私はReact/Reduxを初めて使うので、Reduxフォームを使って簡単なブログアプリケーションを構築しています。今私は、私のアクションでapiにフォームからデータを送信するときに、どのようにajaxエラーを処理するのか不明です。主な問題は、ReduxフォームのonSubmitSuccess設定プロパティを使用していて、エラーが発生しても常に呼び出されているようです。私はonSubmitSuccessまたはonSubmitFailをトリガーするものが本当に不明です。私のonSubmitFail関数は決して実行されませんが、エラーが発生したかどうかに関係なく、私のonSubmitSuccess関数は常にあります。

「なぜならAJAX I/Oのための約束を拒否からの検証エラーの約束拒絶反応を区別するために」私はReduxの形式のドキュメントでは約SubmissionErrorを読んで、それはそれの目的はだという。だから、それは私の必要と反対のように聞こえる。

Redxでミドルウェアとしてredux-promiseを使用しています。

ここに私のコードです。私は意図的に私のcreatePostアクションでエラーを発生させるために私のサーバーAPIでエラーを投げている：

コンテナは、私のReduxのフォームでのonSubmit

export async function createPost(values) { 
    try { 
    const response = await axios.post('/api/posts', values) 
    return { 
     type: CREATE_POST, 
     payload: response 
    } 
    } catch (err) { 
    // what would I do here that would trigger onSubmitFail(), 
    // or stop onSubmitSuccess() from executing? 
    } 
} 

Answer 1

redux-formは、onSubmit機能からプロミスを返さないため、フォームの提出が成功したかどうかわかりません。あなたのケースでは

は、それがredux-promiseや取り扱いライブラリ非同期他を使用せずに、これを達成することが可能です：

PostsNew = reduxForm({ 
    validate, 
    form: 'PostsNewForm', 
    onSubmit(values, dispatch, props) { 
    // as axios returns a Promise, we are good here 
    return axios.post('/api/posts', values); 
    } 
    onSubmitSuccess(result, dispatch, props) { 
    // if request was succeeded(axios will resolve Promise), that function will be called 
    // and we can dispatch success action 
    dispatch({ 
     type: CREATE_POST, 
     payload: response 
    }) 
    }, 
    onSubmitFail(errors, dispatch) { 
    // if request was failed(axios will reject Promise), we will reach that function 
    // and could dispatch failure action 
    dispatch({ 
     type: CREATE_POST_FAILURE, 
     payload: errors 
    }) 
    } 
})(PostsNew) 

Answer 2

によって呼び出さ

PostsNew = reduxForm({ 
    validate, 
    form: 'PostsNewForm', 
    onSubmit(values, dispatch, props) { 
    // calling my createPost action when the form is submitted. 
    // should I catch the error here? 
    // if so, what would I do to stop onSubmitSuccess from executing? 
    props.createPost(values) 
    } 
    onSubmitSuccess(result, dispatch, props) { 
    // this is always called, even when an exeption occurs in createPost() 
    }, 
    onSubmitFail(errors, dispatch) { 
    // this function is never called 
    } 
})(PostsNew) 

アクションを

非同期アクションを処理するには、redux-thunk,、または非同期コードを実行できる他のミドルウェアを使用する必要があります。