La fonction distinctUntilChanged() de BehaviourSubject n'est pas une fonction

Question

Je suis nouveau à Rxjs J'essaie de comprendre BehaviourSubject Voici mon code

export interface State {
    items: Items[]
}

const defaultState = {
    items: []
};

const _store = new BehaviorSubject<State>(defaultState);

@Injectable()
export class Store {
    private _store = _store;
    changes = this._store.distinctUntilChanged()
        .do(() => console.log('changes'));

    setState(state: State) {
        this._store.next(state);
    }

    getState() : State {
        return this._store.value;
    }

    purge() {
        this._store.next(defaultState);
    }
}

Lorsque je lance mon projet, j'obtiens l'erreur suivante dans ma console

platform-browser.umd.js:1900 EXCEPTION: Error: Uncaught (in promise):
EXCEPTION: Error during instantiation of Store! (StoreHelper -> Store).
ORIGINAL EXCEPTION: TypeError: this._store.distinctUntilChanged is not a function

Quelqu'un peut-il m'aider ? De plus, si j'essaie de créer un magasin pour mes objets de modèle, s'il y a un autre moyen plus simple, n'hésitez pas à le suggérer.

Toute aide est la bienvenue.

Answer 1

Il faut importer toute la bibliothèque rxJs ou celle qui est spécifique à ce projet.

import 'rxjs/add/operator/distinctUntilChanged';

Mise à jour de rxjs > 5.5 avec des opérateurs pipables,

import { distinctUntilChanged } from 'rxjs/operators';

Les opérateurs de tuyauterie facilitent la construction et l'ébranlement des arbres.

Pour en savoir plus sur la avantages des opérateurs Pipeable que vous pouvez consulter ici .

J'espère que cela vous aidera !

Answer 2

Vous devez en fait importer tous les opérateurs (c'est-à-dire do y distinctUntilChanged ) et le BehaviorSubject également.

import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/do';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

Voir démo plnkr : http://plnkr.co/edit/Wbqv95EiG8BnzC8BpD7E?p=preview

Par ailleurs, je serais prudent avec des affirmations telles que private _store = _store parce qu'il est très difficile à lire, même s'il fait ce que vous voulez.

Elle est générée par https://www.typescriptlang.org/play/ .

define(["require", "exports"], function (require, exports) {
    "use strict";
    var _store = new BehaviorSubject(defaultState);
    var Store = (function () {
        function Store() {
            this._store = _store;
            this.changes = this._store.distinctUntilChanged()
                .do(function () { return console.log('changes'); });
        }
        Store.prototype.setState = function (state) {
            console.log(_store);
            this._store.next(state);
        };
        Store.prototype.getState = function () {
            return this._store.value;
        };
        Store.prototype.purge = function () {
            this._store.next(defaultState);
        };
        return Store;
    }());
    exports.Store = Store;
});