Управление состоянием в приложениях Angular 2 с помощью ngrx / store

 /** app/components/search.reducer.ts **/ export const SearchReducer: ActionReducer<CurrentSearch> = (state: CurrentSearch, action: Action) => { switch (action.type) { // put here the next case statements // first define the default behavior default: return state; } }; 

Первое действие, которое мы должны выполнить, это бездействие: если действие не влияет на состояние, редуктор вернет его без изменений. Это очень важно, чтобы не сломать модель.

Далее мы обрабатываем действие по изменению текста:

 /** app/components/search.reducer.ts **/ switch (action.type) { case SearchBox.StoreEvents.text: return Object.assign({}, state, { name: action.payload.text }); // ... } 

Если действие является действием, предоставляемым компонентом SearchBox , мы знаем, что полезная нагрузка содержит новый текст. Поэтому нам нужно изменить только text поле объекта state .

Согласно лучшим практикам , мы не изменяем состояние, а создаем новое и возвращаем его.

Наконец, выполняются действия, связанные с локализацией:

• для ProximitySelector.StoreEvents.position нам нужно обновить значения позиции
• для ProximitySelector.StoreEvents.radius нам нужно обновить только значение радиуса
• если сообщение ProximitySelector.StoreEvents.off мы просто устанавливаем и позицию, и радиус на null

 /** app/components/search.reducer.ts **/ switch (action.type) { case ProximitySelector.StoreEvents.position: return Object.assign({}, state, { location: { latitude: action.payload.position.latitude, longitude: action.payload.position.longitude } }); case ProximitySelector.StoreEvents.radius: return Object.assign({}, state, { radius: action.payload.radius }); case ProximitySelector.StoreEvents.off: return Object.assign({}, state, { location: null }); // ... } 

Проводить все это вместе

На данный момент, у нас есть два компонента диспетчерских действий и редуктор для обработки сообщений. Следующий шаг — подключить все элементы и проверить их.

Сначала давайте импортируем новые компоненты в модуль app/app.module.ts :

 /** app/app.module.ts **/ import {ProximitySelector} from "./components/proximity-selector.component"; import {SearchBox} from "./components/search-box.component"; import {SearchReducer} from "./reducers/search.reducer"; // the rest of app component 

Затем мы модифицируем метаданные модуля, чтобы включить SearchBox и ProximitySelector качестве директив:

 /** app/app.module.ts **/ @NgModule({ // ... other dependencies declarations: [ AppComponent, SearchBox, ProximitySelector ], // ... }) 

Затем нам нужно предоставить магазин, который позаботится о диспетчерских действиях и запустит редукторы против состояния и действий. Это можно создать с provideStore функции StoreModule модуля StoreModule . Мы передаем объект с названием магазина и редуктором, обрабатывающим его.

 /** app/app.module.ts **/ // before the @Component definition const storeManager = provideStore({ currentSearch: SearchReducer }); 

Теперь мы помещаем менеджера магазина в список поставщиков:

 /** app/app.module.ts **/ @NgModule({ imports: [ BrowserModule, HttpModule, StoreModule, storeManager ], // ... }) 

Наконец, но очень важно, нам нужно поместить компоненты в наш шаблон, передав их store в качестве входных данных:

 /** app/app.component.ts **/ @Component({ // ...same as before template: ` <h1>{{title}}</h1> <div class="row"> <search-box [store]="store"></search-box> <proximity-selector [store]="store"></proximity-selector> </div> <p>{{ state | json }}</p> ` }) 

Класс должен быть обновлен, чтобы соответствовать новому шаблону:

 /** app/app.component.ts **/ export class AppComponent implements OnInit { private state: CurrentSearch; private currentSearch: Observable<CurrentSearch>; constructor( private store: Store<CurrentSearch> ) { this.currentSearch = this.store.select<CurrentSearch>('currentSearch'); } ngOnInit() { this.currentSearch.subscribe((state: CurrentSearch) => { this.state = state; }); } } 

Здесь мы определили частное свойство, которое представляет состояние для предоставления (для пользовательского интерфейса). Служба хранилища вставляется в наш конструктор и используется для получения экземпляра currentSearch . Интерфейс OnInit используется, чтобы получить хук для фазы инициализации, позволяя компоненту подписаться на обновления состояния, используя экземпляр магазина.

Что дальше?

Теперь можно реализовать простой сервис, который принимает CurrentSearch и вызывает внутренний API (например, YouTube ), как в живом примере . Можно изменить сервис, не меняя ни одной строки компонентов или реализации приложения.

Кроме того, ngrx не ограничивается хранилищем: доступно несколько инструментов, таких как effects и selectors , чтобы справиться с более сложными сценариями, такими как обработка асинхронных HTTP-запросов.

Вывод

В этом уроке мы увидели, как реализовать Redux-подобный поток в Angular 2, используя ngrx / store и RxJs .

Суть в том, что поскольку мутации являются корнем многих проблем, их размещение в одном контролируемом месте поможет нам написать более понятный код. Наши компоненты не связаны с логикой, а детали их поведения не известны приложению.

Стоит отметить, что мы использовали шаблон, отличный от того, который показан в официальной документации ngrx , поскольку компоненты отправляют действия напрямую, без использования событий и дополнительного уровня интеллектуальных компонентов . Дискуссия о лучших практиках все еще развивается.

Вы уже попробовали ngrx или предпочитаете Redux? Я хотел бы услышать ваши мысли!