2017-01-02 19 views
1

私は、送信後にAPIから成功メッセージを配信するサポートフォームを用意しています。フォームコンポーネントクラスでは、私はmapStateToProps()を取得し、その値をレデューサーから取得します。状態に応じてReact-Reduxで通知を処理する方法は?

function mapStateToProps(state) { 
    return { contact_form: state.contact_form.all} 
} 

し、ユーザーに通知を表示するために、私は

if(this.props.contact_form.data) { 
     notify_banner(" Your request is submitted successfully.","success",5000); 
     } 

を行うこの方法の問題点は、状態が全くクリアされないということです。したがって、ユーザーがサポートフォームページにアクセスするたびに、状態がまだ保持されているときにこのアラートが表示されます。

アクションが実行された後、クリア状態でこのthreadを見ましたが、これは状態を空にしてアラートを表示しません。

どのようにしてユーザーに一度通知すればよいですか?

+0

RESETアクションを 'componentWillMount'または' componentWillUnmount'にディスパッチできます。 –

+0

あなたの状態にフラグを付け加えることができます。これは、既に "知らされていて(メッセージによる)表示されているかどうかを表示します。" – MariuszJasinski

+0

フラグを追加すると、ユーザーはフォームを送信することができます一度。ユーザーが複数回提出したい場合はどうなりますか?このフラグは問題を引き起こします。 –

答えて

1

1つの方法は、ユーザーがフォームを送信した後に成功アクションを送信することです。ここでは、form = submitを意味するflag = trueを取る。したがって、このチェックでバナー通知を表示することができます。

if(this.props.contact_form.flag) { 
    notify_banner("Success"); 
    //disptach reset action here 
} 

通知後、即座にresetStateアクションのdipatchingによってcontact_form.flagをfalseにリセットします。

関連する問題