0

In my app.component.html I create a custom component (contact-table component) that should get a new value (Account) to present after I update the in the store the connected user to be someone else.

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]
      }
    });
  }
}

The subscribtion in AppComponent class works great and fires any update that comes up.

The problem is that the async pipe in app.component.html does not send the new account to the contact-table component. I think he doesn't get notified for any updates.

I tried to see what is being sent to the contact-table component, and I saw he only get one value in the first creation of the contact-table component and its undefined. Thats not possibole becouse my reducer function creates an empty Account object for the initial state of my app.

Is there anything you notice that I missed?

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 回答
1

尝试使用 json 管道来查看视图是否从该商店选择中获取任何内容。

<span>{{connectedAccount$ |async | json}}</span>

于 2016-07-28T00:34:45.317 回答
0

您可以包含ngrx-store-freeze - 可变状态的问题很容易解决。我经常调试动作调度的另一种方法是引入一个用于记录目的的效果。这也有助于识别问题。

于 2017-05-29T11:05:28.940 回答