Как получить доступ к другому хранилищу модулей с помощью StoreModule.forRoot () и StoreModule.forFeature () ngrx

Создание приложения 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() только для данных, которые действительно будут может использоваться только модулем?

ИМХО: Разделение состояния на модули - отличная идеология для окончательной практики многократно используемых фрагментов кода. Я имею в виду написать автономный модуль и просто вставить его в свое приложение - это здорово ... но приложению почти всегда необходимо передавать данные от одного модуля к другому, и когда это должно произойти, нарушенное состояние в модулях создает больше проблем чем это решает.


person John    schedule 04.02.2018    source источник


Ответы (1)


Вам просто нужно импортировать HomeModule в другой модуль, чтобы в этом новом модуле также были зарегистрированы хранилище и эффекты домашней функции. После этого вам нужно определить хранилище домашней функции в конструкторе компонента нового модуля, и вы сможете использовать его так же, как и в HomeModule.

person mgajic    schedule 19.03.2018