Вся твоя жизнь была ложью

На протяжении всей нашей карьеры большинство из нас учили составлять набор инструкций и выполнять работу. Он был в основном сосредоточен на «КАК», а не на «ЧТО», и это имеет смысл, а также очень важно узнать, как вы решаете что-то, и мы можем овладеть навыками. написать то же самое лучше на следующем уровне. Когда я говорю «написать лучше», я имею в виду возложение минимальной когнитивной нагрузки на следующего разработчика, работающего над этим. Упрощение для следующего разработчика (и вас в будущем), чтобы понять, что происходит (что делает этот фрагмент кода).

Постановка проблемы

  • Визуализация списка пользователей, полученного из API
  • Возможность добавить нового пользователя (имя, фамилия и адрес электронной почты)
  • Возможность обновить существующего пользователя
  • Возможность удалить существующего пользователя

Реактивное первое мышление

Думая с точки зрения действий и состояний, которые нужны вашему компоненту, где все является переменной (наблюдаемый поток), которую можно рассматривать как функцию некоторых дельт, и эти дельты (которые снова являются некоторыми потоками) могут быть объединены вместе с использованием операторов RxJs в соответствии с отношение или зависимость, которые у них есть. (Например, sum$ = fn (delta1$, delta2$))

Действия

// fire this to add a new user
addUserAction$$ = new Subject<IUser>();
// fire this to delete a user
deleteUserAction$$ = new Subject<IUser>();
// fire this update a user
updateUserAction$$ = new Subject<IUser>();

Участники поиска данных

private fetchedUsers$ = this.http
    .get<IUser[]>('api/users');

private addUser(user: IUser) {
  return this.http.post<IUser>('api/users', user)
    .pipe(map(() => user));
}

private deleteUser(user: IUser) {
  return this.http
    .delete<IUser>(`api/users/${user.id}`)
    .pipe(map(() => user));
}

private updateUser(updatedUser: IUser) {
  return this.http
    .put<IUser>(`api/users/${updatedUser.id}`, updatedUser)
    .pipe(map(() => updatedUser));
}

Пользовательские события

private userAdded$ = this.addUserAction$$.pipe(
  switchMap((userToBeAdded) => this.addUser(userToBeAdded))
);

private userUpdated$ = this.updateUserAction$$.pipe(
  switchMap((userToBeUpdated) => this.updateUser(userToBeUpdated))
);

private userDeleted$ = this.deleteUserAction$$.pipe(
  switchMap((userToBeDeleted) => this.deleteUser(userToBeDeleted))
);

Здесь каждое пользовательское событие — это функция триггерного действия и вызова API. Например: userAdded$ — это fn(addUserAction$$, addUserAPIRequest), а switchMap (оператор RxJs) используется для поддержки зависимости между этими двумя дельтами для формирования базового состояния userAdded$.

userEvent$ = merge(this.userAdded$, this.userUpdated$, this.userDeleted$);

Любое из этих событий срабатывает, userList$нужно обновить, поскольку userList$ является функцией (зависимостью) между fetchedUsers$ и userEvent$

userList$ = this.userEvent$.pipe(
    startWith(null),
    switchMap(() => this.fetchedUsers$)
);

Вот ссылка на полную демо👇



Реактивные пользователи CRUD — StackBlitz
Демонстрация основных операций CRUD над пользовательскими объектами с использованием парадигмы реактивного (декларативного) программированияstackblitz.com



Я придумаю больше сценариев, чтобы охватить тот же реактивный подход, ваша оценка определенно будет мотивировать. Спасибо!😊