Создание приложения angular5 ... так много движущихся частей по сравнению с vue или react, но я придерживаюсь этого.
Используя ленивую загрузку модулей angulars, я создаю каждую страницу в angular как модуль. Каждый модуль имеет собственное инкапсулированное хранилище с использованием ngrx:
StoreModule.forFeature('home', HomeReducer),
Пока все хорошо ... мы можем легко ввести данные в магазин HomePages с модулем, который выглядит примерно так:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';
import { HomeComponent } from './home.component';
import { HomeRoutingModule } from './home-routing.module';
import { HomeReducer } from '@modules/page/home/redux/home.reducers';
import { HomeEffects } from '@modules/page/home/redux/home.effects';
import { HomeService } from '@modules/page/home/home.service';
@NgModule({
declarations: [
HomeComponent
],
imports: [
CommonModule,
HomeRoutingModule,
StoreModule.forFeature('home', HomeReducer),
EffectsModule.forFeature([HomeEffects])
],
exports: [],
providers: [
HomeService
],
})
export class HomeModule {
}
Компонент тоже довольно простой и выглядит так:
import { Component, OnInit } from '@angular/core';
import * as homeActions from './redux/home.actions';
import { Store } from '@ngrx/store';
import { HomeState } from '@modules/page/home/redux/home.state';
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'app-home-component',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
cars: Observable<any>;
constructor (private store: Store<HomeState>) {
this.cars = this.store.select(homeActions.getCars);
}
ngOnInit () {
}
clickme () {
// dispatch a fetch to the store. gallery of images.
// todo add a propper type model
const imageType: any = {
type: 'cars'
};
this.store.dispatch(new homeActions.GalleryFetch(imageType));
}
}
Функция clickme
отправляет и выполняет действие, которое прослушивается эффектами, которое, в свою очередь, запускает другое действие при успешном http-запросе, которое, наконец, помещает данные в представление ...
Но теперь очевидный следующий шаг ... мне нужно поделиться этими данными с другой страницей. На ум сразу приходят два вопроса
1 - Как лучше всего получить доступ к одним модулям, хранящим данные из другого модуля?
2 - В чем смысл такой инкапсуляции данных модуля, если они должны использоваться совместно с другим модулем, например, модуль входа в систему всегда должен будет предоставлять общий доступ к данным пользователя ... это ответ использовать этот forFeature()
только для данных, которые действительно будут может использоваться только модулем?
ИМХО: Разделение состояния на модули - отличная идеология для окончательной практики многократно используемых фрагментов кода. Я имею в виду написать автономный модуль и просто вставить его в свое приложение - это здорово ... но приложению почти всегда необходимо передавать данные от одного модуля к другому, и когда это должно произойти, нарушенное состояние в модулях создает больше проблем чем это решает.