複数のアクションのディスパッチAPIを取得するためのAPIを取得する

Question

私はティッカーに基づいて株式市場のAPIからデータを取得するアプリを構築しています。私は、サーバ上でreduxを使用しており、クライアント上で+ reduxを使用しており、ソケット間で通信するためにsockets.ioを使用しています。

私がアプリを設定したのは、最初は状態がちょうどテロップのリストで表示されます。 APIから各ティッカーに関するデータは取得されません。 （新しいユーザがソケットに接続するたびに放出される）放射された状態のイベントがあるときはいつでもクライアント側で、クライアント側で次のコードは、実際にフェッチし、次にアクション

socket.on('state', state => { 
    store.dispatch({ 
     type: 'SET_TICKERS', 
     state 
    }); 
}); 

をディスパッチサーバ側からのデータは、私がcomponentDidUpdate関数内から呼び出しを行うクライアント側

class StockList extends Component { 
    constructor(props){ 
     super(props); 
     this.renderButton = this.renderButton.bind(this); 
    } 

    renderButton(stock){ 
     return(
      <button key={stock} type='button' className='btn btn-primary stock-btn'> 
       {stock} 
       <span className='glyphicon glyphicon-remove' aria-hidden='true' 
       onClick={() => this.props.onClick(stock)}></span> 
      </button> 
     ) 
    } 

    render() { 
     if(this.props.stocks){ 
      return (
       <div> 
        {this.props.stocks.map(stock => { 
         return this.renderButton(stock); 
        })} 
       </div> 
      ) 
     }else{ 
      return(
       <div>Loading...</div> 
      ) 
     } 
    } 

    componentDidUpdate() { 
     console.log('The component did update'); 
     console.log(this.props.stocks.toJS()); 
     this.props.fillState(this.props.currentState); 
    } 
} 

上のコンポーネントのライフサイクルフックの内部からアクションを派遣しています。この状態は、状態がテロップのリストで設定された直後に更新されます。しかし、問題は、componentDidUpdateライフサイクルフックがあまりにも多くのアクションリクエストを送信し、APIがクラッシュすることです。なぜこうなった？内部のcomponentDidUpdateからディスパッチを送信して無限ループを作成していますか？調整してこれを修正しますか？

Answer 1

コンポーネントがcomponentDidUpdate()実行につながる火componentWillReceiveProps()方法は、そうええ新しい小道具、受信ので、私は、親render()メソッドの実行を引き起こすthis.props.fillState(this.props.currentState)アップデート親コンポーネントの状態を、実行すると仮定 - あなたは無限ループのいくつかの種類を作成します。それを避けるために

- あなたのコンポーネントツリーのshouldComponentUpdate()方法または変更データフローを使用することができます - 私はパスcurrentStateオブジェクトや小道具によってfillState機能ならば、あなたにもこの機能と親コンポーネントを発射（またはobserver design patternを使用することができることを伝えることができます子コンポーネントをこのプロセスに参加させたい場合）。

私はreact component lifecycle