2017-08-21 21 views
1

私は日付ピッカーを備えたReact/Reduxアプリケーションを持っています。ここで何が起こっているのですReact/Reduxアプリケーションの実行順序の問題

handleChangeDate(date) { 

    // First, I set the new date in my redux store 
    this.props.actions.setDate(date); 

    // Check some condition 
    if(a !== b) { 

     // I then call a callback function that is passed as a prop from the parent component 
     return this.props.someCallBackFunction(); 
    } 

} 

はここに私のコードの簡易版だ私は新しい日付を設定すると

  • 最初はすべてが
  • 正常に動作し、someCallBackFunction()は最初に発射しているようですアクティブな日付をストアから取得してAPI呼び出しを行います。しかし、日付はまだ変更されていないので、私は日付変更を開始する前と同じデータを取得します
  • 私はもう一度日付を変更すると、同じことが上記のように起こっていますが、ステップ。

言い換えれば、実行順序が逆であるため、前回の処理で設定した日付のデータセットが常に得られます。

これを引き起こしている可能性があり、修正する方法はありますか?

P.S.コールバック関数は、reduxストアから有効な日付を取得します。なぜなら、私はそれを渡していないからです。私はreduxストアを真実の単一のソースとして使用する考えが好きですが、何とか実行順序の問題を修正する必要があります。

答えて

0

この場合、このハンドラの内部でコールバックを処理する必要はありません。ライフサイクルメソッドcomponentWillUpdate()の使用を検討しましたか?

ここの最初のいくつかの例を見てみると、役に立つかもしれません。

https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/update/tapping_into_componentwillupdate.html

+0

非常に興味深い!以前は 'componentWillUpdate()'を使ったことはありません。私はちょうど迅速かつ汚れた更新を行い、それは今、正しい日付を取得しているようだ。私はこの新しい概念を消化するだけです。私は非常に頻繁にこの問題にぶつかりませんし、正直言って、私は今なぜそれを持っているのか分かりません。一見すると、 'componentWillUpdate()'を使うことは確実なアイデアのように思えます。というのも、それは明確なイベントに基づいているからです。一方、私は実行命令が予測不可能であるか、または予測可能であるのかと疑問に思っていますが、私はそれを理解しません。 – Sam

+0

それを聞いてうれしが助けられました。ライフサイクルメソッドを明示的に使用しない限り、ストアが更新されるのを待つものは何もないという事実に戻ってくると思います。あなたの真実は事前定義された方法でコンポーネントに伝える必要があり、そのようなコールバックをイベントハンドラの中に入れることは、現在の状態と戻ってくるものとの間の切断を求めることです。状態は更新するために分割されますが、同じ関数内の変数を更新するのとは異なります。 –

+0

一つのことは確かです:あなたに感謝して、 'componentWillUpdate()'について学ぶことは素晴らしいことです。 – Sam