Question

我几乎可以肯定我应该，但我没有找到有关Redux文档的任何具体信息。我的大多数Angular组件中的模式是我订阅/取消订阅Redux商店，如：

import { Component, OnInit } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'selector',
    templateUrl: 'name.component.html'
})
export class ComponentNameComponent implements OnInit {
    private unsubscribe : Function;

    constructor(@Inject(AppStore) private store: Store<AppState>) {}

    ngOnInit() {
        this.unsubscribe = this.store.subscribe ( ()=>{ this.updateFromState(); });
    }
    // Is unsubscribing onDestroy necessary?
    ngOnDestroy(){
        this.unsubscribe();
    }

    this.updateFromState(){
        // ...
    }
}

所以我想知道我是否应该总是取消订阅商店，如果我没有，会发生什么。

Answer 1

是的，在应用程序不使用时，您应该销毁(unsubscribe)应用程序中的所有可观察对象。我不知道Redux store，但我觉得你仍然应该在onDestroy中杀死你的观察者。

如果您不取消订阅（），会发生什么？

第一次加载组件时ngOnInit()将订阅store，现在再次回到其他组件，然后重新访问相同的组件，您将获得新的subscription以及之前的一个（所以2个订阅）。重新访问组件时，此subscription计数会增加多少次，这会降低应用程序的性能。如此安全的一面，您应该在创建新的subscription之前杀死之前的ngOnDestroy()，这通常在<!doctype html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/InterestPage.css"> </head> <body>  <header> <div class="innerwrapper"> <h1><a href="#">Feel Hunt</a></h1> <div class="otherOptions"> <div class="notificationdiv"> <div class="notifyCoun"> <p>3</p> </div> <svg style="enable-background:new 0 0 48 48;" version="1.1" viewBox="0 0 48 48" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css"> .st0{display:none;} .st1{fill:none;stroke:#303030;stroke-width:0.7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st2{fill:#303030;} </style><g class="st0" id="Padding__x26__Artboard"/><g id="Icons"><g><path class="st1" d="M12.44998,29.25c0.4714-1.86041,0.98683-3.71044,1.39399-5.58655 c0.20076-0.92508,0.37522-1.85624,0.50479-2.79409c0.12749-0.92277,0.12761-1.86938,0.32255-2.78069 c0.17715-0.82819,0.41986-1.62416,0.79385-2.38678c0.72808-1.48468,1.84795-2.76857,3.21698-3.69551 c1.54611-1.04685,3.39019-1.61638,5.25786-1.61638c2.6,0,4.96,1.06,6.66999,2.76999 c1.1685,1.1685,1.95078,2.64423,2.40368,4.22483c0.48483,1.69205,0.49984,3.44094,0.81387,5.16177 c0.41544,2.27656,1.13475,4.46739,1.71247,6.7034"/><path class="st1" d="M36.75998,35.78003H11.24002c-0.35004,0-0.60004-0.33002-0.5-0.67004L12.44998,29.25h23.09003 l1.71997,5.85999C37.36002,35.45001,37.11002,35.78003,36.75998,35.78003z"/><path class="st1" d="M22.39999,35.86509V36.32c0,0.71,0.58,1.29,1.29,1.29h0.93c0.71,0,1.29-0.58,1.29-1.29v-0.43993"/><path class="st1" d="M21.00458,13.27578c-1.74433,0.9948-3.03389,2.64047-3.76966,4.84763"/><line class="st1" x1="16.98094" x2="16.84722" y1="20.13664" y2="21.16766"/></g></g></svg> //this is notifcation panel DIV <div class="notificationPanel"> this should be full screen </div> </div> <div class="profilePicDrop"> <img src="./img/sky-night-space-trees%20(4).jpeg" alt=""> <div class="getDisplayNone dropDown"> <a href="#">vdvdv</a> </div> </div> </div> </div> </header> </body> </html>中完成。

是否有必要取消订阅Angular组件中的Redux存储

1 个答案: