@ngrx/store로 상태 개체의 현재 값을 가져오는 방법은 무엇입니까?
웹 서비스를 호출하기 전에 서비스 클래스에서 다음 속성을 가져와야 합니다.dataForUpdate우리 주에서부터지금은 이렇게 하고 있습니다.
constructor(public _store: Store < AppState > ,
public _APIService: APIService) {
const store$ = this._store.select('StateReducer');
.../...
let update = this.actions$.filter(action => action.type == UPDATE)
.do((action) => this._store.dispatch({
type: REDUCER_UPDATING,
payload: action.payload
})) **
* GET STATE ** *= => .mergeMap(action => store$.map((state: AppState) => state.dataForUpdate).distinctUntilChanged(),
(action, dataForUpdate) {
return {
type: action.type,
payload: {
employee: action.payload,
dataForUpdate: dataForUpdate
}
};
}) *
AND CALL API *= => .mergeMap(action => this._APIService.updateEmployee(action.payload.employee, action.payload.dataForUpdate),
(action, APIResult) => {
return {
type: REDUCER_UPDATED
}
})
.share();
.../...
let all = Observable.merge(update, ....);
all.subscribe((action: Action) => this._store.dispatch(action));
}
팔로잉 가이드로 angular2-store- example(https://github.com/ngrx/angular2-store-example/blob/master/src/app/users/models/users.ts) 을 사용하고 있습니다.
더 좋은 (청소기) 방법이 있는지 궁금합니다.
라이브 예제: https://plnkr.co/edit/WRPfMzPolQsYNGzBUS1g?p=preview
@ngrx/store v1.x에 대한 원래 답변
@ngrx/storeBehaviorSubject를 확장하며,value사용할 수 있는 속성.
this._store.value
그것은 당신의 앱의 현재 상태가 될 것이고, 거기서 당신은 속성, 필터, 맵 등을 선택할 수 있습니다.
업데이트:
예제의 내용을 파악하는 데 시간이 좀 걸렸습니다(: 현재 가치를 파악하려면).dataForUpdate, 다음을 사용할 수 있습니다.
let x = this._store.value.StateReducer.dataForUpdate;
console.log(x); // => { key: "123" }
@ngrx/store v2.x에 대한 업데이트
버전 2로 업데이트가 되면서.value문서에 설명된 대로 제거되었습니다.
Store에서 최신 상태 값을 동기적으로 꺼내기 위한 API가 제거되었습니다.대신에, 당신은 항상 의지할 수 있습니다.
subscribe()상태 값을 얻어야 하는 경우 동기화 실행:
function getState(store: Store<State>): State {
let state: State;
store.take(1).subscribe(s => state = s);
return state;
}
@Sasxa의 답변에 따라 구문이 새로운 버전으로 변경되었습니다.@nrgx/store(v5 및 v6).기본 RxJS 라이브러리가 ^5.5.0으로 업데이트된 후, 이제 모든 파이프에서 사용 가능한 파이프 메소드가 있습니다.Observable인스턴스(instance)를 사용하면 보다 쉽게 연결할 수 있고 구독을 달성하는 방법을 변경할 수 있습니다.
이제 다음과 같은 작업을 수행할 수 있습니다.
import { take } from 'rxjs/operators';
function getState(store: Store<State>): State {
let state: State;
store.select('your-state').pipe(take(1)).subscribe(
s => state = s
);
return state;
}
아니면, 엄밀하게 사용하는 것.pipe()연산자:
import { select } from '@ngrx/store';
import { take } from 'rxjs/operators';
function getState(store: Store<State>): State {
let state: State;
store.pipe(select('your-state'), take(1)).subscribe(
s => state = s
);
return state;
}
코드를 좀 더 가독성 있게 만들고 싶다면 다음과 같은 비동기/대기 메커니즘을 사용할 수도 있습니다.
import { select } from '@ngrx/store';
import { take } from 'rxjs/operators';
function async getStateAsync(store: Store<State>): State {
let state = await store
.pipe(
select('your-state'),
take(1)
)
.toPromise<State>();
return state;
}
질문에 대한 직접적인 답변은 아니지만, 스토어에서 단일 값을 검색하는 방법을 찾는 이 페이지를 찾았습니다.
이를 달성하기 위해, 당신은 다음을 주입할 수 있습니다.State이의를 제기함@ngrx/store아래와 같이
import { State } from '@ngrx/store';
constructor (private state: State<AppState>) {
let propertyValue = state.getValue().path.to.state.property;
}
그state개체는 현재 상태를 비공개로 유지합니다._value속성, 에 의해 액세스됨.getValue()방법.
withLatestFrom()아니면combineLatest()서브스크립션 체인의 메소드는 필요한 것만 제공하며 Observables+Ngrx의 정신에 따라 조정됩니다.
GET STATE 대신.mergeMap()위의 코드에서 사용하기withLatestFrom()다음과 같은 모습일 것입니다
...
.withLatestFrom(store$, (payload, state) => {
return {payload: payload, stateData: state.data}
} )
...
별도로, 원래 질문의 코드는 redux 작업의 비동기 효과를 관리하는 것으로 보이는데, 이것이 ngrx/effects 라이브러리의 정확한 목적입니다.한번 확인해 보시기를 권합니다.효과를 유선으로 연결하고 나면 비동기 감소 작업을 관리하기 위한 코드가 훨씬 더 깨끗해집니다.짐 린치의 이 기사는 저에게도 큰 도움이 되었습니다.Angular 2의 "ngrx/store"를 위한 "ngrx/effects", @Effects 및 비동기 미들웨어의 기초
마이 솔루션
state classing ngStore는 BehaviorSubject이므로 이를 주입하고 이 값 속성을 사용하여 최신 값을 얻을 수 있습니다.
constructor(private state:State<YourState>...) {
}
someMethod() {
// WHAT'S MORE: you can use your selector directly on it!
let v = yourSelector(this.state.value);
}
@ngrx/store v4.x에 대한 업데이트
v4.x 시점에서 우리는 어쩔 수 없이take작동기를 파이프에 연결하여 동기화할 수 있습니다.
function getState(store: Store<State>): State {
let state: State;
store.pipe(take(1)).subscribe(s => state = s);
return state;
}
그건 저한테 효과가 있어요.Store from '@ngrx/store'를 가져와야 하며 AppState가 상태입니다.
private state: AppState;
constructor(private store: Store<AppState>) { }
ngOnInit() {
this.store.select(x => this.state = x).subscribe();
}
댓글 하나 더.이거 쓸 때._store.value.StateReducer.currentPeriod.id
변환기 반환 "app/state/stateService.ts(133,35): 오류 TS2339: 'StateReducer' 속성이 'AppState' 유형에 없습니다."
constructor ( public _store: Store<AppState>) {
const store$ = this._store.select ('StateReducer');
.../...
let saveTransaction = this.actions$
.filter (action => action.type==SAVE_TRANSACTION )
.map (action => { return { type:SAVING_TRANSACTION, payload : action.payload }; } )
.mergeMap ( action => this._transactionService.updateTransaction (
this._store.value.StateReducer.currentProfile.id,
this._store.value.StateReducer.currentPeriod.id,
action.payload),
(state, webServiceResponse) => { return { type:TRANSACTION_UPDATED, payload :null }; }) ;
}
문제를 해결하기 위해 rxjs\subject 폴더에서 BehaviorSubject.d.ts를 변경했습니다.
import { Subject } from '../Subject';
import { Subscriber } from '../Subscriber';
import { Subscription } from '../Subscription';
export declare class BehaviorSubject<T> extends Subject<T> {
private _value;
private _hasError;
private _err;
constructor(_value: T);
getValue(): T;
value: T; <=== I have changed it to value: any;
_subscribe(subscriber: Subscriber<any>): Subscription<T>;
_next(value: T): void;
_error(err: any): void;
}
합법적인 수정인지 확실하지 않습니다 ;)
AppState 속성인 카운터 2개와 축소기 2개가 있는 상태의 미니멀리즘 애플리케이션을 만들었습니다.각 감속기는 특정 카운터에 연결되어 있고, 저는 각 카운터에 대해 다음과 같은 관측 가능한 것을 구독했습니다.console.log그 가치. 가 오면 축소기 자체도 콘솔에 글을 씁니다호출이 되면 축소기 자체도 콘솔에 글을 씁니다.
이벤트를 발송하여 두 환원자를 호출하는 버튼이 있습니다.또한 2개의 카운터가 2개의 레이블에 바인딩되므로 카운터의 변화는 다음과 같습니다.<p>Counter: {{counter1 | async}}</p>.
각 카운터를 축소기에 매핑하는 작업은 다음과 같습니다.StoreModule.forRoot({ counter1: Reducer1, counter2 : Reducer2 })
import { Component, NgModule } from '@angular/core';
import { Store, Action, StoreModule } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import { BrowserModule } from '@angular/platform-browser';
interface AppState {
counter1 : number;
counter2 : number;
}
export function Reducer1(counter : number = 0, action : Action) {
console.log(`Called Reducer1: counter=${counter}`);
return counter + 1;
}
export function Reducer2(counter : number = 0, action : Action) {
console.log(`Called Reducer2: counter=${counter}`);
return counter + 2;
}
@Component({
selector: 'app-root',
template: `<p>Counter: {{counter1 | async}}</p>
<p>Counter: {{counter2 | async}}</p>
<button (click)='increment()'>Increment</button>`
})
export class AppComponent {
title = 'app';
counter1 : Observable<number>;
counter2 : Observable<number>;
constructor(private store : Store<AppState>) {
this.counter1 = this.store.select('counter1');
this.counter2 = this.store.select('counter2');
this.counter1.subscribe(x => console.log(`Subscribe event for counter1 fired: counter=${x}`));
this.counter2.subscribe(x => console.log(`Subscribe event for counter2 fired: counter=${x}`));
}
increment() {
this.store.dispatch({type:'foo'});
}
}
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
StoreModule.forRoot({ counter1: Reducer1, counter2 : Reducer2 })
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
이것은 단지 이 문제에 대한 나의 경험일 뿐이지 표준은 아닙니다.code.
github에서 답을 보시기 바랍니다: 상태 스냅샷 #227
갖고싶다state인에constractor그래서 나는 항상unasynchronous:
constructor (private state: State<AppState>) {
this.store.select("yourSelector").forEach(yourSelector => {
this.property = yourSelector.path.to.state.property
});
}
이것은 나를 위한 일입니다. 나는 내 객체 데이터를 가져올 것입니다.
this.store.select('dataStore').subscribe(data => { console.log(data) }
언급URL : https://stackoverflow.com/questions/35633684/how-to-get-current-value-of-state-object-with-ngrx-store
'source' 카테고리의 다른 글
| BLOB Oracle 10g에 이미지 삽입 (0) | 2023.10.19 |
|---|---|
| Android 에뮬레이터에서 화면 방향을 변경하려면 어떻게 해야 합니까? (0) | 2023.10.19 |
| Oracle이 데이터베이스 테이블의 행에 NaN을 추가하는 시기/이유 (0) | 2023.10.19 |
| 문자열에서 사용하는 문자 셀의 수 (0) | 2023.10.14 |
| WooCommerce 가변상품 공지사항 이슈 - 상품 옵션을 선택해주세요 (0) | 2023.10.14 |