React Reduxディスパッチで再帰エラーが発生する

Question

React（14.2）とReduxを使用しています。更新時にアクションをディスパッチすると、再帰ループが発生します。

componentWillMount() { 
    const { wizardActions, valid, errors } = this.props 
    wizardActions.setPropState({valid: valid, errors: errors}) 
} 

componentWillUpdate(nextProps) { 
    const { wizardActions } = this.props 
    console.log('NP', nextProps) 
    //*** IF I UNCOMMENT THE FOLLWOING LINES THE APP GOES INTO AN INFINTIE 
    // RECURSION LOOP... 
    /*if(this.props !== nextProps) { 
    wizardActions.setPropState({valid: nextProps.valid, errors: nextProps.errors}) 
    }*/ 
} 

現在のコンポーネントの小道具が変更された場合、どのようにRedux状態を更新できますか？私もcomponentWillReceiveProps()でこれを試して同じことをします。

TIA！

Answer 1

componentDidUpdateフックを使用できない理由はありますか？
React docsには、無限ループを避けるためthis.setStateをcomponentWillUpdateに呼び出さないことに注意してください。 Reduxのdispatchはthis.setStateではありませんが、同じ効果が発生します。

Answer 2

プロポーショナルの変更が外部の何かによって引き起こされた場合、アクションをディスパッチしても問題ありません。リアクタールータ。しかし、Redux自体から注入された小道具への変更に応じてアクションをディスパッチして、サイクリックにするように思えます。これはReduxでやるべきことではありません。

validとerrorsはどこから来たのですか？それらがReduxによって管理されている場合、componentWillUpdateにアクションをディスパッチする必要はありません。新しい値を受け取ると、は既にRedux状態で更新されています。それらがローカル状態の親コンポーネントによって管理されている場合は、その状態を2つの真理値源（コンポーネントとストア）で複製するのではなく、最初にReduxに移動することを検討してください。

一般的に言えば、アプリ内の特定の状態に対して真実の原因が1つだけある必要があります。この真実の源泉は、Reduxストア、Reactコンポーネント、または何らかの外部ソースになることができますが、ライフサイクルの方法でいくつかの真実のソースを同期させないでください。

Answer 3

OK - 次のように私は小道具specifcするifを変更し、問題なくこの作業を取得するために：...もっと

componentWillUpdate(nextProps) { 
    const { wizardActions } = this.props 
    if(this.props.errors !== nextProps.errors) { 
    wizardActions.setPropState({valid: nextProps.valid, errors: nextProps.errors}) 
    } 
} 

いくつかのことをすべてreplysため

1. 感謝をし、それらのいくつかの詳細レベル... それは働いていたソリューションへの道を私に導いた@アジウムでした
2. ComponentDidUpdateはDOM操作のためにもっと意図されていて、それは私がやっていることではありませんここ
3. 問題の小道具（有効とエラー）は、Reduxフォームデコレータによって注入されます。 Redux FormはRedux状態でいくつかのものを保持しますが、これらはありません - 文字通り実行時の小道具を注入されます