0

app.component.html で、ストア内の接続ユーザーを別のユーザーに更新した後に提示する新しい値 (アカウント) を取得するカスタム コンポーネント (contact-table コンポーネント) を作成します。

app.component.html:

<contact-table [contacts]="connectedAccount$ |async"></contact-table>

app.component.ts:

export class AppComponent implements OnInit
{
  private connectedAccount$: Observable<Account>;
  constructor(private store:Store<any>) {
    this.connectedAccount$ = this.store
      .select(state=> state.connectedAccountReducer.connectedAccount);

    this.connectedAccount$
      .subscribe(account1=> {
       //the app prints any new account that comes up. It's working here.
       console.log(account1);
      });
  }
  public ngOnInit() {
    this.store.dispatch({
      type: updateConnectedAccount,
      payload: {
        connectedAccount: ACCOUNTS[0]
      }
    });
  }
}

AppComponent クラスのサブスクリプションはうまく機能し、更新があれば起動します。

問題は、app.component.html の非同期パイプが新しいアカウントを contact-table コンポーネントに送信しないことです。彼は更新の通知を受けていないと思います。

contact-table コンポーネントに何が送信されているかを確認しようとしましたが、contact-table コンポーネントの最初の作成で値が 1 つしか取得されず、未定義であることがわかりました。レデューサー関数がアプリの初期状態用に空の Account オブジェクトを作成するため、それは不可能です。

私が見逃したことに気づいたことはありますか？

4

3 に答える 3

2

状態への変更を作成するために Object.assign を使用していることを確認してください。変異した状態を返すべきではありません。Redux/ngrx と非同期パイプは、オブジェクト ハッシュが変更されたときに変更を検出します (または、少なくともこれは私の理解です)。まったく新しいオブジェクトを作成していなかったが、誤って既存の状態を変更してそれを返したときに、この問題に遭遇しました。

Redux サイトを引用するには -> http://redux.js.org/docs/basics/Reducers.html

状態を変更しません。Object.assign() でコピーを作成します。Object.assign(state, { visibilityFilter: action.filter }) も間違っています: 最初の引数を変更します。最初のパラメーターとして空のオブジェクトを指定する必要があります。また、代わりに { >...state, ...newState } を記述するオブジェクト展開演算子の提案を有効にすることもできます。

RC2 にも非同期の問題があったため、RC3 以降を使用していない場合は、アップグレードすることをお勧めします。

これがすべてだとは言いませんが、私の経験から最も有力な候補です。お役に立てれば。

于 2016-07-27T00:39:10.930 に答える
0

ngrx-store-freezeを含めることができます- 可変状態の問題は簡単に対処できます。アクションのディスパッチをよくデバッグするもう 1 つの方法は、ロギング目的で Effect を導入することです。これは、問題の特定にも役立ちます。

于 2017-05-29T11:05:28.940 に答える