ストアで使用できるアクションがいくつかあるとしましょう：Load、LoadFail、LoadSuccess。すべての私の行動は非常に単純です、LOAD = "load"、LOAD_FAIL = "load failed"、とLOAD_SUCCESS = "load success"私はそうのように、これらのスイッチを簡単な減速を持っています。
export function reducer(state: State = initialState, action: Actions): State {
switch (action.type) {
case Actions.LOAD: {
console.log("Actions.LOAD");
return state;
}
case Actions.LOAD_FAIL: {
console.log("Actions.LOAD_FAIL");
store.error = action.payload;
return state;
}
case Actions.LOAD_SUCCESS: {
console.log("Actions.LOAD_SUCCESS");
state.data = action.payload;
return state;
}
default: {
return state;
}
}
}
ロードディスパッチを処理するエフェクトクラスがあります。
@Injectable()
export class TestersEffects {
constructor(
private service: MyHttpService,
private actions$: Actions
) {}
@Effect() load$ = this.actions$.pipe(
ofType(Actions.LOAD),
switchMap(
action => {
return this.service.load().pipe(
map(data => {
console.log("load$ fired");
return new TestersActions.LoadSuccess(data);
}),
catchError(error => {
console.log("error");
return of (new Actions.LoadFail(error));
})
)
}
)
);
}
最後に、私はこれらすべてをそのように使用しています：
export class MyClass implements OnInit {
data: any;
constructor(private store: Store<AppState>) {}
ngOnInit() {
this.store.dispatch(new Actions.Load());
this.store.select(store => store.State).subscribe(
data => this.data = data,
error => this.handleError(error)
);
}
handleError(error) {
//Whatever I'll do to handle this error
}
}
このコードは、要求しているサーバーが応答するときに正常に機能します。ただし、応答しない状況に対処する必要があります。エラーを取得する方法を完全に理解するのに十分なngrx / storeのフローを理解していないだけだと思いますが、途方に暮れています。コードをデバッグするcatchErrorと、エフェクトクラスのinが起動してLoadFailアクションを送信し、レデューサーがアクションをキャッチしてエラーを設定し、状態を返します。ただし、サブスクリプション側ではMyClass、何も表示されません。私はここで重要な何かを見逃しているに違いないと思いますが、グーグルの専門知識はすべて私を手ぶらで残し、スタックオーバーフローに勇敢に立ち向かい、その問題についての知恵を請うと思いました。
tl; dr：サーバーが応答するとき、私のストアは問題なく動作しますが、応答しないとき、私のエラーは、監視可能なストア状態のサブスクリプションに送信されません。
私はそれを考え出した。私はそれを類推して、それからそれを技術的に説明するつもりです。
すべての車と同じように、独自のVINを備えた特定の車があるとします。その車には、人々が座ることができるいくつかの座席があります。車が到着したとき、あなたは車の中にいる人々だけを本当に気にし、必ずしも車自体を気にしません。基本的に、私の元の例で起こっていることは、それが新しい人ではなく、新しい車であるかどうかを確認しているようだったということです。そのため、システムを機能させるためには、車ではなく人をチェックする必要がありました。
だからそれの技術。2つのオブジェクトを比較するときに、それらの参照が同じでない場合、それらに含まれるデータに関係なく、それらは同じオブジェクトではありません。私の場合、状態オブジェクトの変化を観察したかったのです。これが機能しなかった理由は、内部データが変更されたにもかかわらず、状態オブジェクトの参照が変更されなかったためです。では、どのように修正しましたか？さて、それについて行くには2つの方法があります。状態オブジェクト自体の変更を引き続き監視する場合は、提供する新しいデータを使用して、レデューサーでオブジェクトを再割り当てする必要があります。それ以外の場合、変更/エラーのみを監視する場合は、監視する各変数を監視する必要があります。
基本的に、これは次のようになります。
interface Person {
name: string;
id: number;
}
function comparePeople() {
var p1: Person = { name: "John", id: 1 }
var p2: Person = { name: "James", id: 2 }
var p3: Person = { name: "John", id: 1 }
console.log(`p1 === p1 ? ${p1 === p1});
console.log(`p1 === p2 ? ${p1 === p2});
console.log(`p1 === p3 ? ${p1 === p3});
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加