Angular - Ngrxストアのデータ要素へのアクセス

Question

現在、私は状態データにアクセスできますが、非同期で状態内の特定のデータメンバーのみを抽出できます。私はAngularとNgrxの初心者です（しかし、私はReact/Reduxを少し使っていますが）誰かが明白な解決策であるかもしれないと指摘してくれることを期待していました。私は問題を研究し、可能性のある解決策として州の特定のデータ要素にセレクタを使用する人々を見てきました。しかし、私はすでにコンポーネントクラスに状態を持っているので、データにアクセスするためのシンプルなライナーがあるように感じられます。そして、ES6 /フロントエンドのnaiveは使用を妨げています。私がデータにアクセスしようとしているところで、 '// **'が付いたコンポーネントクラスに2つのコメントがあります。

TL; DR：asyncを使用してコンポーネントHTMLのNgrxストアから必要なデータ要素にアクセスできますが、コンポーネントのクラス内の同じデータ要素にアクセスする方法はわかりません。

Componentクラス：

interface AppState{ 
    view: Object 
} 

@Component({ 
    selector: 'app-content', 
    templateUrl: './content.component.html', 
    styleUrls: ['./content.component.css'] 
}) 
export class ContentComponent implements OnInit { 
    view: Observable<Object> 
    //**I want to be able to have a reference to the viewId and viewData in this class 
    //**so I can dispatch an action using those data fields 

    constructor(private store: Store<AppState>){ 
    this.view = store.select('view'); 
    } 

    ngOnInit() { 
    } 
} 

コンポーネントHTML

<div *ngIf="view | async as v" style="color:black">{{v.viewId}}</div> 

リデューサー：

import { ActionReducer, Action } from '@ngrx/store'; 
import * as viewIds from './view.ids'; 
import * as actionTypes from './view.actions'; 

const defaultState = { 
    viewId: viewIds.DEFAULT, 
    viewData: {} 
} 

const newState = (state, newData) => { 
    return Object.assign({}, state, newData) 
} 

export function viewReducer(state: Object = defaultState, action: Action) { 
    const data = action.payload; 
    switch (action.type) { 
     case actionTypes.UPDATE_VIEW: 
      return newState(state, { viewId: data.viewId, viewData: data.viewData }) 

     case actionTypes.DO_NOTHING: 
      console.log("Do nothing!") 
      return state; 

     default: 
      return state; 
    } 
} 

Answer 1

あなたはあなたの店に加入してそれからデータを得ることができますが、コンポーネントが破壊されたときに加入を忘れることを忘れないでください。非同期では、バックグラウンドで、ストアからデータを取得する2つの方法があります。あなたは（1）が解除されますテイクを呼び出すgithub's ngrx example app

this.store.select(fromCore.getView).take(1) 
    .subscribe(view=> { 
    this.viewData= view; 
    }); 

///////meth two /////////// 
this.view$ = store.store.select(fromCore.getView); 
this.view$.map(view=> { 
    this.viewData= view; 
}).take(1);