reduxアクションからのエラーメッセージをクリアする方法

Question

私はAPIを持っていますが、これはエラーを返す可能性があります。簡単な形式では、コンポーネントは以下のように読み取ります。問題は、エラーが発生したときに、エラーメッセージを消してクリアする手順は何ですか？別のアクション火災減速に未定義にエラーを設定、または再利用可能な誤差成分を使用して、エラー自体に閉じるボタンを提供します。これを行うにはまっすぐ進む方法はありません

class LoginError extends Component { 
    render() { 
     return (
      { 
       this.props.error != null ? 
        <h2>this.props.error</h2> : 
        undefined 
      } 
     ) 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
     error: state.error 
    }; 
} 


export default connect(mapStateToProps, null)(LoginError); 

Answer 1

、あなたは基本的に2つのオプションがあります減速機でエラーを未定義に設定するアクションをディスパッチします。

個人的に私は常に最初の方法を使用しました。フォームの提出を例に取ることができます。ユーザーがフォームを提出すると、form-submit/requestが発射され、読み込みメッセージが表示されます。フォームが正しく送信された場合は、form-submitを発し、エラーが発生した場合は、form-submit/errorを発砲し、減速機にエラーを設定します。次にform-submit/requestでエラーをクリアするので、エラーが発生した場合にユーザーからフィードバックが得られますが、フォームが再度送信されるとエラーはクリアされます。フォームが提出されたときに何もしたくない場合（奇妙な場合）、form-submitが起動されたときにエラーをクリアすることができます。このアプローチの欠点は、フォームのフィールドが変更されたときなどにエラーをクリアしたい場合は、別のアクションを追加し、そのアクションに対してもエラーを未定義にする必要があることです。

エラーコンポーネントにクローズボタンを配置した場合は、Reactコンポーネントのエラーを再利用することができますが、すべてのAPI呼び出しに対してaction/dismiss-errorアクションを設定し、エラーをundefinedに設定する必要がありますそれらは、すぐに非常に退屈になることができます。

私の最善のアプローチは、最初の方法を使用することですが、各ページまたはセクションに表示するエラーの量を注意深く選択することです。この方法では、ページに関連付けられたAPI呼び出しで表示されるエラーセクションを各ページに持たせることができ、すべてのAPI呼び出しではなくページごとにエラーアクションが必要になります。

Answer 2

Quote from docs:

店は、アプリケーションの全体の状態ツリーを保持しています。 の中で状態を変更する唯一の方法は、その上にアクションをディスパッチすることです。

これだけです。何かを還元状態に保ち、その値を変更するには、アクションをディスパッチする必要があります。