多個動作派發破壞API獲取請求在REDX應用程序

我正在建立一個應用程序，我從股票市場API基於代價獲取數據。我在服務器上使用了redux，並在客戶端上使用了+ redux，並使用sockets.io在兩者之間進行通信。多個動作派發破壞API獲取請求在REDX應用程序

我設置應用程序的方式是，最初狀態只是填充了代碼列表。沒有數據從API獲取有關每個股票的數據。在客戶端，每當有發射狀態的事件（這是發出的每一個新的用戶連接到插座時），在客戶端下面的代碼調度動作

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

現在，實際取從服務器端的數據，我從一個組件的生命週期內鉤在客戶端

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函數中調用。此狀態在設置好代理商名單後立即更新。但是，問題在於componentDidUpdate生命週期鉤子發出太多的操作請求，導致api崩潰。這是爲什麼發生？我是否通過從componentDidUpdate內部發送派發來創建無限循環？節流會解決這個問題嗎？

來源

2016-12-07 random_coder_101

我想執行this.props.fillState(this.props.currentState)更新父組件的狀態，這導致母公司render()方法執行，所以你的組件接收新道具，火componentWillReceiveProps()方法，從而導致componentDidUpdate()執行，所以是它 - 你創建某種無限循環的。

要避免這種情況 - 你可以使用shouldComponentUpdate()方法或更改組件樹的數據流 - 我可以告訴大家，如果通currentState對象，並通過道具fillState功能，可以和火這個功能和父組件（或使用observer design pattern如果你想讓子組件參與這個過程）。

我建議你閱讀更多關於react component lifecycle

來源

2016-12-07 08:55:11

但該組件沒有收到新的道具無限多，不是嗎？因此，儘管有無數的動作派發，但組件不會在每次派發時重新呈現，因爲狀態不會隨着每次派發而改變。它只是在第一個動作調度上發生變化，對吧？ –

多個動作派發破壞API獲取請求在REDX應用程序

回答

相關問題