2017-02-06 10 views
1

を見ることができません成分。は、私は、次のアクションを持って更新された状態

ので、handleSubmit機能からexpeted出力に含まは次のとおりです。

false 
ACTION CALLED 
REDUCER CALLED 
true 

が、それは私を与えている:

false 
ACTION CALLED 
REDUCER CALLED 
false 

しかしredux dev toolに、私はLOGIN_USER_REQUESTで差分を見ることができます:

enter image description here

handleSubmit機能の中に表示されないのはなぜですか?それはredux-formライブラリに関連するものですか?

追加情報:あなたが原因のJavascriptの非同期性質のような結果を得ている

追加shouldComponentUpdatelogger

shouldComponentUpdate = (nextProps, nextState) => { 
    console.log('Should component update called'); 
    if (this.props.isAuthenticating !== nextProps.isAuthenticating) { 
     console.log('distntict'); 
     return true; 
    } 
    console.log('false'); 
    return false; 
    } 

enter image description here enter image description here

+0

あなたのコンポーネントに 'shouldComponentUpdate'メソッドを追加しよう、とtrueを返し、場合に役立ちます願っています小道具は同等ではなかった。 –

+0

@DmitriyKovalenkoは更新された投稿を見てください。私もロガーを追加しました – FacundoGFlores

+0

もう一つの変種は、あなたが想像することができる限り、あなたのコンポーネントをredux 'connect'経由で接続し、' mapStateToProps'を作成しないということです。 –

答えて

1

。だからあなたのコード

handleSubmit = (values) => { 
    console.log(this.props.isAuthenticating); 
    this.props.actions.loginUserRequest(); 
    console.log(this.props.isAuthenticating); 
    } 

まずに、あなたは小道具の値を印刷し、その後、アクションが呼び出されますが、アクションが更新された状態で応答を返す前に、あなたの第三文が値をログに記録する呼び出され、以来、状態はまだ更新されていないので、同じ結果が表示されます。

1つのアプローチではコールバックがありますが、それはあなたの場合には必須ではないようです。ご希望の状態を記録するなら、あなたは

componentWillReceiveProps(nextProps) { 
    if(this.props.isAuthenicating != nextProps.isAuthenticating) { 
      console.log(nextProps.isAuthenticating); 
    } 
} 

ようcomponentWillReceiveProps機能

で行うことができ、私はそれが

関連する問題