Angular2とRedux：コンポーネント内に状態を取得する

Question

コンポーネント内の状態にアクセスする必要があります。ほとんどの例では、@ selectおよびasyncパイプを使用してテンプレート内の状態を消費する方法を示しますが、Componentでは直接使用することはできません。必要な状態はその時には変更されていないはずです。

私は3つのソリューションを参照してください。/

1 /利用getStateを（）

constructor(private ngRedux: NgRedux) { } 
ngOnInit() { 
    this.prop = this.ngRedux.getState().prop; 
    // Do what I need with "this.prop" 
} 

2/

getProp() { 
    return this.ngRedux.getState().prop; 
} 

3アクションクリエーターサービスに、このゲッターを移動します@select（）プロパティの購読

@select('stateProp') stateProp$; 
property: string; 
constructor(private ngRedux: NgRedux) { } 
ngOnInit() { 
    stateProp$.subscribe(state => this.property = state) 
    // Do what I need with "this.property" 
} 

これを実行するにはどうすればよいですか？

Thxをここに私の考えだ

Answer 1

そこには正しいか間違って答えたが、これにはおそらくませんが、ちょうど角アプリにReduxのを追加しました、。

ngRedux.getState()はスナップショットを返しますが、@select()は状態フラグメントが変化するたびに応答するパイプラインを設定します。

と複雑さを軽減するためにReduxのをされて使用するための主な理由の1つは、他のコンポーネントによって引き起こされる変化に対応するために、我々は@selectを使用したい場合には状態を、共有しました。

上記の例3は問題があります。
最初に、ngOnInit()コードが実行される前にサブスクリプションが完了することは確実ではありません。そのため、this.propertyは未定義になることがあります。

第二に、我々はケースの使用getState()スナップショットを、たい、または私たちは購読の内側に、後続のコードを移動する場合にはパイプラインを、欲しいです：ときに我々

@select('stateProp') stateProp$; 
property: string; 

constructor(private ngRedux: NgRedux) { } 

ngOnInit() { 
    stateProp$.subscribe(state => { 
    this.property = state; 
    // Do what I need with "this.property" 
    }) 
} 

同じことが言われるかもしれません他の方法でthis.propertyを使用してください。
this.propertyとstateProp$は同じ状態を示しているので、どちらか一方がありますが、両方は同じではありません。

コードの形状を制限する以外に、私は@select()にいくつかの問題があることを発見しました。

パイプラインは、状態が初期化される前に実行されます。
状態がどのように初期化されるかに応じて、パイプラインを通じて値undefinedを受け取ることがあります。グラム

export interface IAppState { 
    config?: any; 
} 

export const initialState: IAppState = {} 

@select() config$: any; 

ngOnInit() { 
    config$.subscribe(config => { 
    this.color = config.color; // Error: Cannot read property 'color' of undefined 
           // May happen if config is obtained async 
    } 
} 

ガードを使用することができます。

ngOnInit() { 
    config$ 
    .filter(data => !!data) 
    .subscribe(config => { 
     this.color = config.color; 
    } 
} 

または初期状態は、すべてのオブジェクト・レベルの初期化を行うことを確認してください：あなたが見てする必要がある場合は

export const initialState: IAppState = { config: {} } 

パイプラインは、継続的に
を実行既存の状態を更新する前に、サブスクリプションは継続的に起動します。メモ、サブスクリプションとディスパッチとの間の接続が微妙（サブ状態の変化、またはネストされた方法による分離）であるかもしれない：

@select() myDataList$: IDataArray; 

myMethod() { 
    this.myDataList$.subscribe(myDataList => { 
    // Check something on myDataList 
    console.log('I will continuously loop'); 
    this.addDataMethod(); 
    } 
} 
addDataMethod() { 
    ngRedux.dispatch({type: addSomeDataAction, payload: myData}); 
} 

ngRedux.getState()を使用して、好ましいアクセス方法、または.take(1)とサブスクリプションを制限します。サブスクリプションの角度で
サブスクリプションのクリーンアップ

は現在.take(n)または類似演算子で完了していない場合ngOnDestroy()で解除する必要があります。この手順を実行しないと、コンポーネントがなくなるとサブスクリプションが続行されます。 Ref：Angular/RxJs When should I unsubscribe from `Subscription`

@select() myData$: IMyData; 
private myDataSub; 

myMethod() { 
    this.myDataSub = this.myData$.subscribe(myData => { 
    // Do something with myData 
    } 
} 
ngOnDestroy() { 
    this.myDataSub.unsubscribe(); 
}