ReactJS - redux-thunkがAPI関数を呼び出す理由すべてのコンポーネントをレンダリングした後

Question

私は数週間前からReactで作業していますが、私は非同期API呼び出しの問題に直面しています。この問題をスムーズに処理する代替方法があると読みましたが、それは 'redux-thunk'です。だから私は、NPMを使用してそれをインストールし、私は以下のように、自分の行動の作成者ではなく、減速機にこれを追加しました：

export function fetchDataSuccess(data) { 
    return { 
    type: types.FETCH_DATA_SUCCESS, 
    data 
    } 
export function fetchData(url) { 
    return (dispatch) => { 
    fetch(url) 
     .then((response) => { 
      if(!response.ok) { 
       throw Error(response.statusText); 
      } 
      console.log(response); 
      return response; 
     }) 
     .then((response) => response.json()) 
     .then((data) => dispatch(fetchDataSuccess(data))) 
     .catch(() => dispatch(fetchHasErrored(true))); 
    }; 
} 

これは私の行動の作成者であると私はfetchDataSuccessにある、「データ」と宣言しました（データ）関数、私のコンポーネントでmapStateToPropsを使用して、私のプロジェクトに3つのコンポーネントがあるとしましょう。

App.js：使用CONNECT（mapStateToProps、mapDispatchToProps）
Component_level1：Component_level2にApp.jsからデータを配信
Component_level2：がComponent_level2からデータを受信し、ボタン
Component_level2。 fetchData（API_URL） in componentDidMount（）

だから、私は画面にログアウトしようとした、全体の流れは、この

App.jsウィルマウント
Component_level1ウィルマウント
Component_level2ウィルマウントのように思えた
Component_level2なかったマウント
なFetchData（API_URL）
Component_level1なかったマウント
App.jsがマウント

DIDと呼ばれるこれは、私はそう理解している流れがありますコンポーネントのライフサイクルまで。うまくいくと、console.log（応答）が表示されます。私は画面上でそれを確認し、画面にデータを出力するonClickメソッドを持つComponent_level2にボタンコンポーネントがあり、それも機能しています。

は、しかし、問題は、私は、データが私の変数に保存されているか、どこかのデータは、ユーザー

私は本当にイライラと絶望的な思いを表示することを使用する必要があるコンポーネントをレンダリングする前にしたいです。誰でも私を助けてくださいこれを動作させるには？

Answer 1

まず、@ ReiDienに感謝します。

この問題を解決する方法が見つかりました。この問題で苦しんでいた人、そして必死に答えを探し求めたすべての人にとって、これが役立つことを願っています。

それは私を強調した問題だった、人々のための要約です：

• 問題があります私のプロジェクトが反応し、再来によって建てられた、それはミドルウェア
• としてReduxの-サンクましたまさに私は私のアプリにReduxの-サンクを適用した
• 以下のように、それはしかしうまくいきませんでした:(
• APIを呼び出す関数は、ガイドポストのほとんどがsuggeあるようcomponentDidMount（）にありましたスティング

だからここにいる。まず、React.jsのコンポーネントのライフサイクルの基本的な概念を理解する必要があります。まだ理解していない場合は、このイメージを参照してください。

shouldComponentUpdate(nextProps, nextState) { 
    return (JSON.stringify(nextProps.item) != JSON.stringify(this.props.item) 
} 

：

だから、私は私のアプリはいくつかのデータが変更されたことを知っているようにshouldComponentUpdate（）関数にいくつかのコードを入れて、何とかそれは完全に動作しませんでした、私のコードは、このました

これにより、特にコンポーネントを再度レンダリングするときに、アプリケーション全体のプロセスを最適化することができます。とにかく、コードからこの部分を取り除くと、私のコードはこのように正しく動作するようになりました！

私が見つけたこの方法がうまくする適切な方法であれば、私はわからないが、とにかくそれが働きました。あなたが「本当の」回答に関係なくいくつかの解決策を探していたら、それはあなたを助けるかもしれない、と思う。
私は読んだ後にあなたに良いリンクが残っているとコメントしてくれますし、あなたには正しい方法や人々に役立つ記事も教えてくれてありがとう。 :)