Angular 4 Redux выберите вопрос (основной)

Question

Я все еще на начальных этапах изучения Angular 4 и Redux. У меня есть компонент, который получает информацию из магазина. Это прекрасно работает на вид. Но когда я пытаюсь получить доступ к той же информации из компонента, я получаю объект вместо значения.

Вот мой компонент:

import { Component } from '@angular/core';
import { NgRedux, select } from 'ng2-redux'; 
import { AppState } from '../../reducers/reducer';
import { QuizService } from '../../services/quiz.service';  
import { clearQuiz } from '../../actions/actions'; 

@Component({ 
    selector: 'quiz', 
    templateUrl: './quiz.component.html', 
    styleUrls: ['./quiz.component.css']
})

export class Quiz {
    constructor(private ngRedux: NgRedux<AppState>, private service: QuizService) {}

    @select('currentQuiz') currentQuiz;
    @select('quizLength') quizLength; 
    @select('sessionId') sessionId; 

    handleClose() {
        console.log("CLOSE", this.sessionId )
        this.service.deleteSession(this.sessionId)
            .subscribe(res => {
                this.ngRedux.dispatch(clearQuiz())
            })
            , error => {
                console.error(error); 
            }
    }
}

Строка "console.log("CLOSE", this.sessionId)" не возвращает значение, сохраненное в хранилище. Вместо этого я получаю это:

CLOSE AnonymousSubject {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}

Как вы получаете данные от этих объектов в классе? В представлении, если я добавлю "| async" после значения, они появятся. Но я не могу получить значения из фактического класса компонента. Помогите!

Answer 1

Вы должны подписаться на выбранные кусочки государства, потому что, когда вы @select из магазина вы не получите значение, но Observable, Вот почему вы должны использовать async труба в вашем шаблоне. Это автоматически делает подписку для вас.

Вы можете, например, подписаться на OnInit Подцепить и назначить его на поле. Рекомендуется указывать полям суффикс $ если они наблюдаемые. Я предположил, что у вас есть интерфейс IQuiz для модели данных currentQuiz, Если имя переменной совпадает со свойством store (игнорируя $), вы можете опустить его с помощью @select:

@select() currentQuiz$: Observable<IQuiz>;
currentQuiz: IQuiz;

// ...

ngOnInit() {
  this.currentQuiz$.subscribe(currentQuiz => this.currentQuiz = currentQuiz)
}

Когда ваш магазин будет обновлен, this.currentQuiz будет автоматически переназначен.