Ngrx:如何监视数组中的单个对象以进行更改

时间:2018-05-19 18:55:37

标签: angular ngrx

这是我监视数组中selectedUser的方法。但是,如果更新了数组的任何其他元素,则会触发watchSelectedUser observable,因为它只应在更新selectedUser对象时触发。

---当前代码---

减速机代码:

export const userAdapter = createEntityAdapter<UserModel>({
  selectId: x => x.UserId
});
export interface UserlistState extends EntityState<UserModel>{
  selectedUserId: number
};

export const initialState: UserlistState = userAdapter.getInitialState({
  selectedUserId: undefined,
}); 

const getSelectedUserIdState = (state) => { 
  return state.userlist.selectedUserId
};
export const getSelectedUserId = createSelector(getSelectedUserIdState,userId => userId);

订阅所选用户模型更改

watchSelectedUser = (): Observable<UserModel>=>{
        return this.userlistStore.select(userlistReducers.selectAll).pipe(map(users => {
            return users.find(x=> x.UserId == this.getSelectedUserId());
        }));
    }

1 个答案:

答案 0 :(得分:0)

我建议将数据结构从数组转换为每个用户的集合/键值对。

这将允许您select(userlistReducers[_id])并且意味着您将不会有其他UserModel个对象更改它们所包含的数组。

state: ApplicationState = {
   users: {
      'd27f23d67f23i7d23': {name: 'Nate, '_id': 'd27f23d67f23i7d23'},
      '87387387g3487gd83': {name: 'Shyamal, '_id': '87387387g3487gd83'}
   }
}


watchSelectedUser = (): Observable <UserModel> => {
    return this.userlistStore.select(userReducers['87387387g3487gd83']);
}

这有点粗糙,我不确定select()逻辑是否完美,但您现在一次只能访问一个用户。它需要一些重构和一个新的实体适配器,但IMO是一个更好的结构。