Управление состоянием
Advanced Angular
Петров А. С., Павлов М. Ю.
Занятие 1
2
О курсе
Цели:
1. Поделиться опытом
2. Подготовиться к грейду на мидла
Темы:
1. Управление состоянием
2. Сложные формы
3. Процесс сборки
4. DI
5. Роутинг
6. ...
7. Profit!
Состояние
Состояние – любые изменяемые данные, которыми оперирует наше приложение
Примеры:
1. Информация о текущем пользователе
2. Элементы панели быстрого доступа
2. Список задач в журнале
В чем проблемы работы с состоянием?
Синхронизация данных из разных источников
Сервер
URL
Пользователь
SessionStorage
LocalStorage
Сложные переходы между состояниями
-
При изменении ОН:-
если выбран ОН, находящийся на уровне выше заданного в настройках основной фильтрации - все настройки основной и дополнительной фильтрации должны сохраняться; -
если выбран ОН, находящийся на уровне заданном в настройках основной фильтрации или ниже, но выше уровня заданного в настройках дополнительной фильтрации, то все настройки дополнительной фильтрации должны передаваться в соответствующие настройки основной фильтрации, при этом дополнительная фильтрация должна быть сброшена; -
если выбран ОН, находящийся на уровне заданном в настройках дополнительной фильтрации или ниже, то основная и дополнительная фильтрации должны быть сброшены; -
если выбран ОН, находящийся на уровне заданном в настройках основной фильтрации или ниже, и дополнительная фильтрация не задана, то фильтрация должна быть сброшена;
-
Из КТ по аналитике, небольшой пункт
Какие подходы к управлению состоянием существуют?
Простой подход: хранение в полях
@Injectable()
class DataService {
private records: Record[];
getRecords(): Record[] {
return this.records;
}
setRecords(records: Record[]): void {
this.records = records;
}
}Основная проблема такого подхода?
Посмотрим ещё раз...
@Injectable()
class DataService {
private records: Record[];
getRecords(): Record[] {
return this.records;
}
setRecords(records: Record[]): void {
this.records = records;
}
}Как оповещать компоненты об изменении данных?
Колбэки, колбэки и ещё раз колбэки!
@Injectable()
class DataService {
private records: Record[];
private onRecordsChanged: ChangeCallback<Record[]>[] = [];
getRecords(): Record[] {
return this.records;
}
setRecords(records: Record[]): void {
this.records = records;
this.onRecordsChanged.forEach(it => it(records));
}
registerOnRecordsChanged(callback: ChangeCallback<Record[]>): UnregisterCallback {
this.onRecordsChanged.push(callback);
return () => {
this.onRecordsChanged = this.onRecordsChanged.filter(it => it !== callback);
};
}
}Welcome to callback hell
Как сделать лучше?
Спрятать данные в потоки!
В сервисе – потоки с данными нашего состояния
@Injectable()
class DataService {
private readonly records$: Observable<Record[]>;
constructor(http: HttpClient) {
this.records$ = http.get('/rest/data').pipe(shareReplay(1));
}
getRecords(): Observable<Record[]> {
return this.records$;
}
}Компонент получает поток из сервиса
@Component({
selector: 'sis-data-view',
templateUrl: './data-view.component.html',
})
export class DataViewComponent {
records$: Observable<Record[]>;
constructor(service: DataService) {
this.records$ = service.getRecords();
}
}И поток используется в шаблоне
<div *ngFor="let records of records$ | async">
<div>{{record.name}}</div>
</div>Следует придерживаться использования AsyncPipe, избегать прямых подписок
Граф зависимостей данных
Поиск
Фильтры
Запрос строк
Строки
А теперь посмотрим на практике
Что мы сделаем:
1. Получим строки
2. Добавим фильтр
3. Добавим поиск
4. Добавим паджинацию
В чем плюсы?
1. Декларативно
2. Мощно
3. Реактивно
4. Лениво
В чем минусы?
Вспомним граф зависимостей данных...
Поиск
Фильтры
Запрос строк
Строки
Сложные графы
Паджинация
Фильтры
Запрос строк
Строки
Поиск
На самом деле еще сложнее
Избыточные вычисления
Паджинация
Фильтры
Запрос строк
Строки
Поиск
/csp/sou/rest/view/query
/csp/sou/rest/view/query
Дебаг – боль
Show 190 more frames
To be continued...
Задание на дом
Цель: написать простой журнал
Что почитать
1. https://blog.strongbrew.io/rxjs-best-practices-in-angular/
2. https://medium.com/ngx/why-do-you-need-unsubscribe-ee0c62b5d21f
3. https://rxjs-dev.firebaseapp.com/guide/subject
4. https://rxjs-dev.firebaseapp.com/api/index/function/of
5. https://rxjs-dev.firebaseapp.com/api/index/function/combineLatest
6. https://rxjs-dev.firebaseapp.com/api/index/function/merge
7. https://rxjs-dev.firebaseapp.com/api/operators/scan
8. https://rxjs-dev.firebaseapp.com/api/operators/shareReplay
Управление состоянием
By walkingdev
