각도 - Ngrx 저장소의 데이터 요소에 액세스

Question

지금 상태 데이터에 액세스 할 수 있지만 비동기를 통해 상태 내의 특정 데이터 멤버 만 추출 할 수 있습니다. 저는 Angular와 Ngrx 초보자입니다. (React/Redux를 조금 사용해 봤지만) 누군가가 명백한 해결책이 될 수 있다고 생각할 수 있기를 바랍니다. 나는이 문제를 연구했고 사람들이 가능한 해결책으로 국가의 특정 데이터 요소에 셀렉터를 사용하는 것을 보았습니다. 하지만 이미 구성 요소 클래스에 상태가 있으므로 데이터에 액세스 할 수있는 간단한 한 줄짜리 코드가있을 것 같아서 ES6/프런트 엔드의 기본 설정을 사용하지 못할 수도 있습니다. 데이터에 액세스하려고 시도한 '// **'이 앞에 붙은 구성 요소 클래스에는 두 개의 주석이 있습니다.

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

상점에 가입하고 데이터를 가져올 수 있지만 구성 요소가 폐기 될 때 가입을 취소하는 것을 잊지 마십시오. Async는 백그라운드에서 저장소에서 데이터를 검색하는 두 가지 방법을 사용합니다. 당신은 (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);