angular + redux/ngrx:状态更新与表单

Question

首先,我正在使用:

• 重选选择器
• normalitr用于归一化和非规范化
• ngrx/store,它是redux的一个被动实现,用于状态管理

现在,类似于反应现实世界的例子,我有一片专用于实体的状态,这实际上是denormalize()normalizr工作方法的一个要求,因为文章可以有一个author,或者media都可以是实体本身.

这意味着当我选择一个user来自我的状态的单个时,我正在抓住这个全局的实体片段,我的选择器看起来像这样

export const getOne = createSelector(
  getAllEntities,
  getDetailId,
  (entities, id) => denormalize(id, schema, entities)
);

然后从ngrx/store"选择"

state.map(getOne).distinctUntilChanged()

现在填写我的表格我这样做(半伪代码)

class Cmp {
  form = new FormGroup({ /* whatever */});
  user$ = this._store.map(getOne).distinctUntilChanged();

  constructor(private _store: Store<AppState>) {
    this.user$.subscribe((data) => {
      this.form.patchValue(data);
    });
  }
}

结合重新选择和map/distincUntilChanged我几乎可以在任何实体更改时获得新的更新,所以请考虑这种情况..

• 您访问文章ID 5,它将填充订阅由全局实体切片组成的商店切片
• 你开始编辑" text"FormControl
• 其他人更改了ID为3的用户,并且您通过websockets接收更新,导致subscribe触发(因为全局实体切片已更改)并覆盖您在编辑时更改的任何值,使用当前存储中的值(旧值)

..这个websocket有很多不同的情况可以导致更新更新.

在redux世界中是否有任何模式可以解决这个问题,或者ngrx世界中的任何人都必须处理这个问题？我想到的唯一明智的事情就是在输入时保存商店的任何价值,这需要挂钩角度反应形式来存储,这是屁股的巨大痛苦,并且ngrx /表格不会很快到来.但我确信有人必须已经提出了一些简单的解决方案.

谢谢!

(你可以阅读关于gitter的后续讨论)

Answer 1

到目前为止，我们通过更新输入模糊的存储来处理这个问题（所以不是每次击键时）。

class Cmp {
    form = new FormGroup({ /* whatever */});

    constructor(private _store: Store<AppState>) {
        this._store.select(getOne)
                   .take(1) // we don't listen to changes
                   .subscribe((data) => {
                       this.form.patchValue(data);
                   });
    }

    onInputBlur() {
        this._store.dispatch({ type: 'UPDATE_USER', payload: this.form.value });
    }
}

然后我们将 onBlur 事件添加到我们的输入中

<input (blur)="onInputBlur()" formControlName="firstname">