將邏輯移出組件的提示DID更新

Question

我有一個連接組件的REDX，我用很多邏輯使用componentDidUpdate，它開始變得混亂。

我componentDidUpdate看起來有點像這樣：

componentDidUpdate(prevProps: Props) { 
    if (this.props === prevProps) { 
     return; 
    } 

    const { 
     history, 
     a, 
     b, 
     c 
    } = this.props; 

    if (!prevProps.a && !a) { 
     this.proceedToNextStep(); 
     return; 
    } 

    if (b.length === b.length + 1) { 
     history.push(rootUrl); 
     return; 
    } 

    if (c != prevProps.c) { 
     // do stuff 
     return; 
    } 
    } 

道具將改變由於Redux的行動，但我不知道一個更好的地方來確定東西了Redux連接組件發生了變化。

這可能是錯誤的一個屬性，但更多的邏輯出現在這裏，這已經很混亂。

Answer 1

你可以把你的邏輯：

• componentWillReceiveProps(nextProps)：這至少避免了componenent再呈現之前執行的組件邏輯。所述newProps將包含由終極版connect注入的道具
• mapsTateToProps：所述終極版connect第三個參數是發送合併的道具的回調：（狀態道具+調度道具+自己的部件的道具）
• observables包裹在Redux promise：這對我來說是處理邏輯的最佳選擇，因爲它不涉及React組件：我可以鏈接js邏輯（具有可觀察性），並且在邏輯執行的每一步，我都可以觸發dispatch()並訪問應用程序Redux state。 redux-observable模塊將RxJS模塊（observable）和Redux promise模塊（redux promise）混合以便於使用。