2017-09-10 16 views
1

reduxを使用したアラートダイアログの表示に問題があります。私はユーザーが編集した後に成功メッセージを表示したいと思います。私はaction> reducer> storeを使ってフラグを設定しました。コンポーネントの還元状態WillRecievePropsのフォワードバックボタンでの問題

それから私は、問題は、このアプローチではあります

componentWillReceiveProps(nextProps) { 

    if(nextProps.data.updated_form) { 
     alert('form has been updated!'); 
    } 
} 

を行います。ユーザーがフォームを更新した後、別のルートに行くためにどこかをクリックしてからフォームに戻ると、そのアラートもトリガーされます。

+0

のようなコードを持っているだろうが好きだろうか? – Xlee

答えて

0

既存ソリューションの問題点は、店舗の変数updated_formが時間の経過と共に変化しないことです。だから、ページに戻ってアラートを再トリガする。 1つの簡単な解決策は、componentWillUnmount() `でこれらの変更をリセットする別のアクション作成者を作成することです。

サンプル・ストア・減速機は、この

case 'RESET_CHANGES': 
    return {...state,updated_form:null} 

と反応するコンポーネントが再トリガアラートは問題があるなぜこの

componentWillUnmount() { 
    this.props.resetChanges() // assuming you have created action creator 
} 
+0

成功またはエラーメッセージのためにこれを行うべきですか?私はこのパターンを多くのソースコードで見たことがありません。しかし、このアプローチは理にかなっています。 –

+0

あなたのアラートメッセージのために還元店を使用しているので、私はあなたの目標を達成できるこのように語っています。私がこのプロジェクトで作業していた場合、私は警告を出すために還元店を膨らませていませんでした。コンポーネントの反応状態を使用していました –

+1

ええ、私はreduxを使っています。私はすべての状態を店に投げます。 –

関連する問題